javascript - vue-for小实例

问题描述

问 题

代码如下：怎么用vue实现，点击城市显示对应城市的内容？目前只实现了这个程度
截图

点击显示相应数据

事件

已经用v-show实现了，感觉这是最笨的方法，用v-if怎么实现？

var vm = new Vue({
        el: "#app",
        data: {
            city:
            [
                 {
                     items: [
                       {
                           "Companytitle": "沈阳分公司1",
                           "Address": "沈阳市和平区五里河街51号昌鑫大厦G座303室",
                           "Tel": "024-31883687",
                           "Fax": "024-31883735"
                       },
                       {
                           "Companytitle": "沈阳分公司2",
                           "Address": "沈阳市和平区五里河街51号昌鑫大厦G座303室",
                           "Tel": "024-31883687",
                           "Fax": "024-31883735"
                       },
                       {
                           "Companytitle": "沈阳分公司3",
                           "Address": "沈阳市和平区五里河街51号昌鑫大厦G座303室",
                           "Tel": "024-31883687",
                           "Fax": "024-31883735"
                       },
                       {
                           "Companytitle": "沈阳分公司3",
                           "Address": "沈阳市和平区五里河街51号昌鑫大厦G座303室",
                           "Tel": "024-31883687",
                           "Fax": "024-31883735"
                       }
                     ],
                     cityName: "沈阳",
                     top: 226,
                     left: 735,
                     id: 1,
                     show: true
                 },
                 {
                     items: [
                       {
                           "Companytitle": "北京分公司1",
                           "Address": "沈阳市和平区五里河街51号昌鑫大厦G座303室",
                           "Tel": "024-31883687",
                           "Fax": "024-31883735"
                       },
                       {
                           "Companytitle": "北京分公司2",
                           "Address": "沈阳市和平区五里河街51号昌鑫大厦G座303室",
                           "Tel": "024-31883687",
                           "Fax": "024-31883735"
                       }
                     ],
                     cityName: "北京",
                     top: 264,
                     left: 636,
                     id: 2,
                     show:true
                 },
            ]
        },
        methods: {
            cityListfunc: function (index) {
                this.id = index
                //this.show=!this.show
                
            }
        }

    })

解决方案

额。这里估计是图片还有未上传完就提交了吧。。
大概思路：
可以用v-show或是v-if控制显示与否，猜测你的情况可能更加适合v-if吧。
点击事件则是methods内配置+v-on:click，这个应该也不用多说。

不是很清楚lz的问题具体在哪里，还是补下图吧。

补充
这里应该只是渲染一个城市的数据才对？
点击时候对城市id获取，然后用v-if判断其弹框中城市内容的隐藏显示。

这篇关于javascript - vue-for小实例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！