if：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=<device-width>, initial-scale=1.0"> <script crossorigin="anonymous" integrity="sha512-BKbSR+cfyxLdMAsE0naLReFSLg8/pjbgfxHh/k/kUC82Hy7r6HtR5hLhobaln2gcTvzkyyehrdREdjpsQwy2Jw==" src="https://lib.baomitu.com/vue/2.6.12/vue.min.js"></script> <title>Document</title> </head> <body> <!-- view --> <div id="app"> <span v-if="message">true</span> <span v-else="message">false</span> </div> <!-- viewmodel --> <script> var vm = new Vue({ el:"#app", data:{ message:true } }); </script> </body> </html>
for：注意它是遍历本身
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=<device-width>, initial-scale=1.0"> <script crossorigin="anonymous" integrity="sha512-BKbSR+cfyxLdMAsE0naLReFSLg8/pjbgfxHh/k/kUC82Hy7r6HtR5hLhobaln2gcTvzkyyehrdREdjpsQwy2Jw==" src="https://lib.baomitu.com/vue/2.6.12/vue.min.js"></script> <title>Document</title> </head> <body> <!-- view --> <div id="app"> <li v-for="item in items"> {{item.message}} </li> </div> <!-- viewmodel --> <script> var vm = new Vue({ el:"#app", data:{ items:[ {message:"我是1"}, {message:"我是2"}, {message:"我是3"}, {message:"我是4"} ] } }); </script> </body> </html>
On绑定事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=<device-width>, initial-scale=1.0"> <script crossorigin="anonymous" integrity="sha512-BKbSR+cfyxLdMAsE0naLReFSLg8/pjbgfxHh/k/kUC82Hy7r6HtR5hLhobaln2gcTvzkyyehrdREdjpsQwy2Jw==" src="https://lib.baomitu.com/vue/2.6.12/vue.min.js"></script> <title>Document</title> </head> <body> <!-- view --> <div id="app"> <button v-on:click="sayHi">点击我</button> </div> <!-- viewmodel --> <script> var vm = new Vue({ el:"#app", data:{ message:"卢本伟牛逼" }, methods:{ sayHi:function(){ alert(this.message); } } }); </script> </body> </html>