vue中实现动态切换不同的值

约定不等于承诺〃 2021-12-20 08:27 260阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <script src="./vuev2.5.21.js"></script>
        <style>
            ul{
                width: 200px;
                border: 1px solid red;
            }
            li{
                width: 100px;
                height: 30px;
                border: 1px solid black;
                margin: 20px;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <ul v-for="(item,index) in list" :key="item.id" ref="ul" :data-index="index">
                <a href="javascript:void(0)" @click="fold(index)">切换</a>
                <li v-if="item.selected">你好 世界</li>
                <li v-else>{
         {item.name}}</li>
            </ul>
        </div>
        <script>
            var vm = new Vue({
                el:"#app",
                data:{
                    list:[
                        {
                            id:0,
                            name:"hello world",
                            selected:true,//后台的值
                        },
                        {
                            id:1,
                            name:"hello world",
                            selected:true,//后台的值
                        },
                        {
                            id:2,
                            name:"hello world",
                            selected:true,//后台的值
                        },
                        {
                            id:3,
                            name:"hello world",
                            selected:true,//后台的值
                        }
                    ]
                },
                methods:{
                    fold(index){
                        for(let i = 0; i<this.list.length;i++){
                            let key = JSON.parse(this.$refs.ul[i].dataset.index);
                            if(key === index){
                                this.list[i].selected =!this.list[i].selected ;
                            }
                        }
                    },
                }
            })
        </script>
    </body>
    </html>

转载于:https://www.cnblogs.com/tuziling/p/10699457.html