问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

vue怎样让这个可以来回切换？

头像
fwer
    3701395152

    点击每个li后让它切换成val2的值 再点一次val2可以切换成val的值 可以一直这样来回切换 这个效果应该怎么做呢 我写成这样了 试了一下不行 变不回去了

    <!DOCTYPE html>
<html>

    <head>
        <title></title>
        <style type="text/css">
        ul{list-style: none;}
        li{border: 1px solid black;width: 100px;height: 20px;}
        </style>
        <script src="vue.js"></script>
        <script type="text/javascript">
            window.onload = function() {
                new Vue({
                    el: '#div1',
                    data:{
                        arr:[
                            {uid:1,val:'zhangsan',val2:'tom'},
                            {uid:2,val:'lisi',val2:'john'},
                            {uid:3,val:'wangwu',val2:'jiff'},
                         ]
                     },
                     methods:{
                        change:function(uid){
                           this.arr.map(item => {
                                if(item.uid==uid){
                                    item.val=item.val2;
                                }else{
                                    item.val=item.val;
                                }
                           })
                        }
                     }
                     
                })
            }
        </script>
    </head>
    <body>
        <div id="div1">
            <ul>
                <li v-for="item in arr" @click="change(item.uid)">{{item.val}}</li>
            </ul>
        </div>
    </body>

</html>
    vue.js
    阅读 3.6k
    3 个回答
    得票最新
    头像
    Deguang
      1.1k1116
      ✓ 已被采纳

      clipboard.png
      你这个操作直接导致了 数据被覆盖

      如果要实现这个效果，可以考虑给每一个item，增加一个 showVal: default->valIndex,每次点击切换这个变量，然后控制展示的内容 v-show or v-if，不要改动原始数据

      code:

      <li v-for="item in arr" @click="change(item.uid)">{{item.showVal === 1? item.val : item.val2}}</li>
      data:{
    arr:[
        {uid:1,val:'zhangsan',val2:'tom', showVal: 1},
        {uid:2,val:'lisi',val2:'john',  showVal: 1},
        {uid:3,val:'wangwu',val2:'jiff', showVal: 1},
        ]
    },
      methods: {
    change:function(uid){
        this.arr.map(item => {
            item.showVal = (item.showVal === 1 ? 2 : 1);
        })
    }
}
      头像
      T_one
        1.3k51531

        data里面加个标识，

            data:{
        arr:[
            {uid:1,val:'zhangsan',val2:'tom',flag:true},
            {uid:2,val:'lisi',val2:'john',flag:true},
            {uid:3,val:'wangwu',val2:'jiff',flag:true},
         ]
     },

        然后change的时候：

            change:function(uid){
       this.arr.map(item => {
            if(item.uid==uid && item.flag){
                item.flag=false;
                item.val=item.val2;
            }else{
                item.flag=true;
                item.val=item.val;
            }
       })
    }
        头像
        hfhan
          29k72241
          <li v-for="item in arr" @click="change(item)">{{item.val}}</li>

change:function(item){
    item.val1 || (item.val1 = item.val)
    item.val = item.val === item.val1 ? item.val2 : item.val1
}
          撰写回答
          你尚未登录，登录后可以
          • 和开发者交流问题的细节
          • 关注并接收问题和回答的更新提醒
          • 参与内容的编辑和改进，让解决方法与时俱进
          推荐问题