<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue</title> <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script> </head> <body> <div id="app"> <p>{{ name }}== {{age}}</p> <p>{{ nsg }}</p> <p>{{ arr }}</p> <p>{{ obj2 }}</p> <input type="text" v-model="nsg"> <!--model 用于表单双向绑定--> <ul> <li v-for="item in arr">{{item}}</li> </ul> <!--v-for="item in arr" 循环 自生成--> <ul> <li v-for="(v,k) in arr">{{v}}==={{k}}</li> <!-- 数组 v value值 k 索引--> </ul> <ul> <li v-for="(v,k) in abj">{{v}}==={{k}}</li> <!--v 值 k 鉴--> </ul> <ul> <li v-for="(v,i) in obj2">{{v}}==={{i}} =={{v.names}}=={{v.age}}</li> <!--v 值 k 索引--> </ul> <ul> <li v-for="v in obj2">{{v.names}}=={{v.age}}</li> <!--v 值 k 索引--> </ul> <button @click="action">click</button> <button v-on:mouseover="action2" @mouseout="action3">mouseover</button> <!-- v-on 同于 @ --> <button v-show="flags">show</button> <!--flags 为flase 消失--> <p v-if="age>30">{{age}}</p> <p v-else="age>30">{{flags}}</p> <!--show 和 if 区别 show 不占位置 if 位置依然在 --> </div> <script> new Vue({ el:"#app", data:{ name:"aaaa", nsg:"hallo word", age:20, flags:true, arr:["a","b","c","d","e"], abj:{ id:1, namespace:"bbbbb", }, obj2:[{ names:"zzz", age:"20" },{ names:"xxx", age:"30" }] }, methods:{ // 里面专属 放方法 action:function () { this.nsg = "aaaaaaaaaaaaaaaaaa" }, action2:function () { this.age = "90" }, action3:function () { this.age = "190" } } }) </script> </body> </html>
vue 的 v-for 循环 v-if 判断 v-model 双向绑定 的一些列基础
最新推荐文章于 2024-08-23 14:24:38 发布