[Vue基础实战]v-if/show v-for v-for:key的使用
参考代码1:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>v-if/show的使用</title> </head> <body> <div id="app"> <div v-if="flag">从一而终</div> <div v-show="flag">反复无常</div> <input type="button" value="隐藏/显示" @click="flag=!flag"> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { flag:true } }); </script> </body> </html>
参考代码2:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>v-for的使用</title> </head> <body> <div id="app"> <p v-for="(a,b) in list"> {{a}}-{{b}} </p> <p v-for="item in users"> {{item.e}}-{{item.f}} </p> <p v-for="j in 10"> {{j}} </p> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { list: ['a','b','c','d'], userInfo:{ username:'zs', age:100 }, users:[{e:'11',f:'ffff'},{e:'22'},{g:'33',f:'ffffff'}] }, methods: { autoAdd() { this.number++; }, autoSubtract(){ this.number--; } }, }); </script> </body> </html>
参考代码3:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>v-for的使用</title> </head> <body> <h2>华山论剑</h2> <div id="app"> <label for="">ID:<input type="text" v-model="id"></label> <label for="">绰号:<input type="text" v-model="name"></label> <input type="button" value="晋级" @click="add"> <table> <tr v-for="item in list"> <td><input type="checkbox"></td> <td>{{item.id}}</td> <td>{{item.name}}</td> </tr> </table> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { id: 0, name: '', list: [ { id: 1, name: 'dddd' }, { id: 2, name: 'eeee' }, { id: 3, name: 'ffff' } ] }, methods:{ add(){ this.list.unshift({id:this.id,name:this.name}); } } }); </script> </body> </html>
