v-model:双向数据绑定，常用于表单元素
例：<input type='text' v-model='数据名 比如msg'
<script>
new Vue({
el:' 指定的关联选择器',
data:{ 是储存数据的意思
msg:''
}
})
</script>
v-for: 对数组或对象进行循环操作
v-on:时间绑定,用法：v-on:事件，也可以用@表示
v-show/v-if：控制元素的显示隐藏
v-bind 绑定属性 v-bind:属性='值'
这是一个添加的案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div class="lin"> <input type="text" v-model="msg"> <button v-on:click="add">添加</button> <ul> <li v-for="val in wsk">{{val}}</li> </ul> </div> <script src="vue.js"></script> <script> new Vue({ el:'.lin', data:{ wsk:['王帅康','王哲胜'], msg:'' }, methods:{ add:function(){ this.wsk.push(this.msg), this.msg='' } } }) </script> </body> </html><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div class="lin"> <input type="text" v-model="msg"> <button v-on:click="add">添加</button> <ul> <li v-for="(val,index) in wsk">{{val}} <button v-on:click="ltw(index)">删除</button> </li> </ul> </div> <script src="vue.js"></script> <script> new Vue({ el:'.lin', data:{ wsk:['王帅康','王哲胜'], msg:'' }, methods:{ add:function(){ this.wsk.push(this.msg), this.msg='' }, ltw:function(index){ this.wsk.splice(index,1) } } }) </script> </body> </html><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div class="lin"> <p>afdkjhasjhg</p> <p v-show=!see>lala</p> <p>afdkjhasjhg</p> <p v-if=!see>la</p> </div> <script src="vue.js"></script> <script> new Vue({ el:'.lin', data:{ see:true } }) </script> </body> </html><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style> .box{ width:100px; height:100px; background:red; } </style> <body> <div class="lin"> <button v-on:click=wsk>隐藏</button> <button v-on:click=wzs>显示</button> <div class='box' v-show=see></div> </div> <script src="vue.js"></script> <script> new Vue({ el:'.lin', data:{ see:true }, methods:{ wsk:function(){ this.see=false }, wzs:function(){ this.see=true } } }) </script> </body> </html><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div class="lin"> <img v-bind:src="url" alt="" v-on:click='wsk'> </div> <script src="vue.js"></script> <script> new Vue({ el:'.lin', data:{ url:'1.jpg', hef:'2.jpg' }, methods:{ wsk:function(){ this.url=this.hef } } }) </script> </body> </html><!DOCTYPE html> <html lang="en"> <head> <meta charset='UTF-8'> <title>Document</title> </head> <body> <div class="lin"> <img v-bind:src="url" alt="" @click='ltw'> <ul> <li v-for='value in wsk'>{{value}}</li> </ul> </div> <script src="vue.js"></script> <script> new Vue({ el:'.lin', data:{ wsk:[1,2,3,4,5], url:['1.jpg','2.jpg','3.jpg','4.jpg','5.jpg'] }, methods:{ ltw:function(){ this.wsk=this.url } } }) </script> </body> </html>
网友评论