条件渲染v-if,v-else-if,v-else:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="/js/vue.js"></script> </head> <body> <div id="app"> <div v-if="score>90&&score<100">优秀</div> <div v-else-if="score>80&&score<=90">良好</div> <div v-else-if="score>60&&score<=80">及格</div> <div v-else>不及格</div> </div> <script> var vm = new Vue({ el: '#app', data: { score: 60 }, methods: {}, }) </script> </body> </html>
列表渲染：v-for的使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="/js/vue.js"></script> <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"> </head> <body> <div id="app"> <div class="container-fluid"> <div class="row"> <div class="col-md-6 col-lg-offset-3"> <h1 class="text-center">购物车</h1> <div class="pull-right"> <button class="btn-success btn" @click="hans">点我看看</button> </div> <table class="table table-striped"> <thead> <tr> <th>序号</th> <th>商品名</th> <th>价格</th> <th>数量</th> </tr> </thead> <tbody> <tr v-for="good in good_list"> <td>{{good.id}}</td> <td>{{good.name}}</td> <td>{{good.price}}</td> <td>{{good.count}}</td> </tr> </tbody> </table> </div> </div> </div> </div> <script> var vm=new Vue({ el:'#app', data:{ good_list:[] }, methods:{ hans(){ this.good_list=[ {'id':1,'name':'汽车','price':100000,'count':5}, {'id':2,'name':'火车','price':10000,'count':2}, {'id':3,'name':'机动车','price':500000,'count':1}, {'id':4,'name':'三轮车','price':1000,'count':0}, {'id':5,'name':'摩托车','price':10500,'count':10}, {'id':6,'name':'自行车','price':1100,'count':20},] } } }) </script> </body> </html>
v-for循环其他数据类型：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="/js/vue.js"></script> <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"> </head> <body> <div id="app"> <h1>循环数字</h1> <ul> <li v-for="i in number">{{i}}</li> </ul> <h1>循环字符串</h1> <ul> <li v-for="i in str">{{i}}</li> </ul> <h1>循环数组</h1> <ul> <li v-for="i in arr">{{i}}</li> </ul> <h1>循环对象</h1> <ul> <li v-for="(value,key) in obj">{{key}}-------------{{value}}</li> </ul> </div> <script> var vm=new Vue({ el:'#app', data:{number:10, str:'hello world', arr:[5,4,8,4,7,6,8,4], obj:{'name':'ydh','age':18} }, methods:{} }) </script> </body> </html>
双向数据绑定：v-model
只有input框------------->v-model做双向绑定
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="/js/vue.js"></script> </head> <body> <div id="app"> <p>用户名<input type="text" v-model="username"></p> <p>密码<input type="password" v-model="password"></p> <button @click="hans">提交</button> </div> <script> var vm=new Vue({ el:'#app', data:{ username:'', password:'' }, methods:{ hans(){ console.log(this.username) console.log(this.password) } } }) </script> </body> </html>
事件处理：
input标签的事件
-input：只要输入内容，就会触发
-change：只要输入框发生变化，就会触发
-blur：只要失去焦点，就会触发
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="/js/vue.js"></script> </head> <body> <div id="app"> <h1>input事件</h1> 用户名：<input type="text" @input="hans" v-model="username"> <h1>change事件</h1> 用户名：<input type="text" @change="hanchange" v-model="username1"> <h1>blur事件</h1> 用户名：<input type="text" @blur="hanblur" v-model="username2"> </div> <script> var vm=new Vue({ el:'#app', data:{ username:'', username1:'', username2:'', }, methods:{ hans(){ console.log(this.username) }, hanchange(){ console.log(this.username1) }, hanblur(){ console.log(this.username2) } } }) </script> </body> </html>
checkbox单选和多选，radio单选：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="/js/vue.js"></script> </head> <body> <div id="app"> <h1>checkbox单选</h1> <p>用户名：<input type="text" v-model="username"></p> <p>密码：<input type="password" v-model="password"></p> <p>记住密码：<input type="checkbox" v-model="remeber"></p> <p> 篮球<input type="checkbox" v-model="hobby"> 足球：<input type="checkbox" v-model="hobby"> 乒乓球：<input type="checkbox" v-model="hobby"> </p> <p>性别： 男：<input type="radio" v-model="gender" value="1"> 女：<input type="radio" v-model="gender" value="2"> </p> </div> <script> var vm=new Vue({ el:'#app', data:{ username:'', password:'', remeber:true, hobby:[], gender:'', }, methods:{} }) </script> </body> </html>