基本操作

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)
        }
    }
})