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


    <!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{
                 200px;
                border: 1px solid red;
            }
            li{
                 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>
    

      

  • 相关阅读:
    ENVI数据格式
    旋转卡壳模板
    旋转卡壳求两个凸包最近距离poj3608
    树状数组模板
    输入输出挂
    Catalan数以及使用Raney引理证明
    【转】AC神组合数取模大全
    单向HASH——MurmurHash
    hdu4063(圆与圆交+线段与圆交+最短路)
    字符串HASH模板
  • 原文地址:https://www.cnblogs.com/tuziling/p/10699457.html
Copyright © 2020-2023  润新知