基本操作
js文件
<script src="js/vue.js"></script> 就收工了.正式环境用 vue.min.js
v-for对json数据的邦定
当点击时某个按钮时，更改自已与其他对象的css
|
1 2 3 4 5 6 7 8 9 10 11 |
<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> |
|
1 2 3 4 5 6 7 8 9 10 11 |
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样式绑定
|
1 2 3 4 5 6 7 8 9 10 11 |
<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> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
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的方式进行处理
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 |
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) } } }) |