Vue
八、重要指令
九、案例
<style type="text/css"> .btn_wrap { width: 660px; margin: 0 auto; } .btn_wrap:after { content: ''; display: block; clear: both; } .btn { width: 200px; height: 40px; border-radius: 5px; float: left; margin: 0 10px 0; } .box { width: 660px; height: 300px; } .b1 {background-color: red} .b2 {background-color: orange} .b3 {background-color: cyan} .box_wrap { width: 660px; margin: 10px auto; } </style> <div id="app"> <div class="btn_wrap"> <div class="btn b1" @click='setTag(0)'></div> <div class="btn b2" @click='setTag(1)'></div> <div class="btn b3" @click='setTag(2)'></div> </div> <div class="box_wrap"> <div class="box b1" v-show='isShow(0)'></div> <div class="box b2" v-show='isShow(1)'></div> <div class="box b3" v-show='isShow(2)'></div> </div> </div> <script type="text/javascript"> new Vue({ el: '#app', data: { tag: 0 }, methods: { isShow (index) { return this.tag === index; }, setTag (index) { this.tag = index; } } }) </script>
<div id="app">
<div> <input type="text" v-model="inValue"> <button @click='pushAction'>提交</button> </div> <ul> <li @click='deleteAction(index)' v-for="(item, index) in list" :key="index">{{ item }}</li> </ul> </div> <script type="text/javascript"> new Vue({ el: '#app', data: { inValue: '', list: [] }, methods: { pushAction: function () { this.list.push(this.inValue); this.inValue = '' }, deleteAction: function (index) { this.list.splice(index, 1); } } }) </script>