基本操作

js文件

<script src="js/vue.js"></script> 就收工了.正式环境用 vue.min.js

v-for对json数据的邦定

当点击时某个按钮时，更改自已与其他对象的css

<div id="insource" class="col-xs-12">
    <hr>
    <span class="btn btn-app btn-sm btn-pink no-hover" v-for="abc in items">
        <P></P>
        <span class="line-height-1 smaller-90">{{ abc.alias }}</span>
        <p> <span class="line-height-1 smaller-60">{{ abc.id + ":" + abc.type }}</span> </p>
        <p> <span class="line-height-1 smaller-80">{{ abc.group }}</span> </p>
        <span class="badge badge-warning badge-left">电视墙</span>
    </span>
</div>

var insourceView = new Vue({
    el: '#insource',
    data: {
        items: [
            { "alias": "张三", "group": "办工室", "type": "HDMI", "id": "1" },
            { "alias": "李四", "group": "办工室", "type": "HDMI", "id": "2" },
            { "alias": "王麻子", "group": "地下室", "type": "VGA", "id": "3" }
        ]
    }
})

最后的显示效果:

css样式绑定

<div id="insource" class="col-xs-12">
                                    <hr>
                                    <span class="btn btn-app btn-sm no-hover" v-bind:class="[insel==abc.id ? 'btn-pink' : 'btn-success' ]" v-for="abc in items" v-on:click="inSel(abc.id)">
                                        <P></P>
                                        <span class="line-height-1 smaller-90">{{ abc.alias }}</span>
                                        <p> <span class="line-height-1 smaller-60">{{ abc.id + ":" + abc.type }}</span> </p>
                                        <p> <span class="line-height-1 smaller-80">{{ abc.group }}</span> </p>
                                        <span class="badge badge-warning badge-left" v-show="abc.id != 2 ">电视墙</span>
                                    </span>
                                </div>

var insourceView = new Vue({
                el: '#insource',
                data: {
                    insel:0,
                    items: [{
                            "alias": "张三",
                            "group": "办工室",
                            "type": "HDMI",
                            "id": "1",
                            "status": false
                        },
                        {
                            "alias": "李四",
                            "group": "办工室",
                            "type": "HDMI",
                            "id": "2",
                            "status": true
                        },
                        {
                            "alias": "王麻子",
                            "group": "地下室",
                            "type": "VGA",
                            "id": "3",
                            "status": false
                        }
                    ]
                },
                methods: {
                    inSel: function(data) {
                        console.log("last insel is:",this.insel);
                        this.insel = data
                        console.log("now insel is:",this.insel);
                    }
                }
            })

简单vuex应用

现在将上面的再改为vuex的方式进行处理

const gData = new Vuex.Store({
    state: {
        insel: 0,
        insource: [{
            "alias": "张三",
            "group": "办工室",
            "type": "HDMI",
            "id": "1",
            "status": false
        },
        {
            "alias": "李四",
            "group": "办工室",
            "type": "HDMI",
            "id": "2",
            "status": true
        },
        {
            "alias": "王麻子",
            "group": "地下室",
            "type": "VGA",
            "id": "3",
            "status": false
        }
        ],
        sessions: [{
            "alias": "电视",
            "group": "办工室",
            "type": "HDMI",
            "id": "1",
            "insource": 1,
            "status": false
        },
        {
            "alias": "投影仪",
            "group": "办工室",
            "type": "HDMI",
            "id": "2",
            "insource": 2,
            "status": true
        },
        {
            "alias": "中央LED",
            "group": "地下室",
            "type": "VGA",
            "id": "3",
            "insource": 1,
            "status": false
        }
        ]
    },
    mutations: {
        inselChange(state, n) {
            state.insel = n
        },
        sessionOnSel(state, ssid) {
            console.log("mutations:sessionOnSel", ssid)
            state.sessions.forEach((item, index) => {
                if (item.id === ssid) {
                    item.insource = this.state.insel
                }
            })
        },
    },
    getters: {
        nowInsel: state => {
            return state.insel
        }
    }
})


var insourceView = new Vue({
    debug: true,
    el: '#insourceView',
    data: {
        //insel: gData.state.insel, // 在data中直接引用不会实时更新
    },
    computed: {
        insel() {
            return gData.state.insel  // 在computed中计算属性可以触发ajax
        },
        items() {
            return gData.state.insource
        }
    },
    methods: {
        changeinSel: function (data) {
            gData.commit('inselChange', data)
        }
    }
})

var sessionView = new Vue({
    debug: true,
    el: '#sessionView',
    computed: {
        insel() {
            return gData.state.insel
        },
        items() {
            return gData.state.sessions
        }
    },
    methods: {
        sessionSel: function (data) {
            gData.commit('sessionOnSel', data)
        }
    }
})