1、Vue 选项卡
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> .box{ width: 170px; height: 100px; background: #4998DF; } .top .active{ background: red; } </style> </head> <body> <div id="app"> <div class="top" > <button type="button" v-for="(item,index) in menu" :class=" index == activeIndex ? ‘active‘ : ‘‘" @click="handleClick(index)">{{item}}</button> </div> <div class="bottom"> <div class="box" v-text="content[activeIndex]">{{item}}</div> </div> </div> </body> </html> <script src="vue.js"></script> <script type="text/javascript"> var vm = new Vue({ el:"#app", data:{ menu:["选项一","选项二","选项三"], content:["111","222","333"], activeIndex : 0 }, methods:{ handleClick(params){ this.activeIndex = params } } }) </script>
2、todolist
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body> 8 <div id="app"> 9 <input type="text" v-model="inputVal" /> 10 <input type="button" v-model="btnValue" 11 @Click="handleclick()"/> 12 <ul> 13 <li v-for="(item,index) in list">{{item}}<button type="button" @click="handleDel(index)">删除</button></li> 14 15 </ul> 16 </div> 17 </body> 18 </html> 19 <script type="text/javascript" src="vue.js"></script> 20 <script type="text/javascript"> 21 var vm = new Vue({ 22 el : "#app", 23 data:{ 24 btnValue:"提交", 25 list :[], 26 inputVal:‘‘ 27 }, 28 methods:{ 29 handleclick(){ 30 this.list.push(this.inputVal); 31 this.inputVal ="" 32 }, 33 handleDel(index){ 34 this.list.splice(index,1); 35 } 36 } 37 38 }) 39 </script>
原文：https://www.cnblogs.com/9420i/p/10365214.html