1.v-if
v-if/v-else/v-else-if都是用于逻辑判断。
当值为true的时候元素会被插入，当值为false的时候，元素会被删除。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.min.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> </head> <body> <div id="app"> <h3 v-if="show">显示这段文本</h3> <h3 v-else>没有显示这段文本</h3> <h3>{{ show?'显示' : '不显示' }}</h3> </div> <script> var app = new Vue({ el: "#app", data: { show: false, } }) </script> </body> </html>
2.v-bind
v-bind用于动态更新HTML元素上面的属性。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.min.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> </head> <body> <div id="app">v-bind <a v-bind:href="url">www.baidu.com</a> <img v-bind:src="imgurl"> <!--语法糖：用：代替<img :src="imgurl">--> </div> <!--v-bind的基本用途是动态更新HTML元素上的属性--> <script> var app = new Vue({ el: "#app", data: { url: 'www.baidu.com', imgurl: 'http://i1.umei.cc/uploads/tu/201705/22/slt1.png' } }) </script> </body> </html>
3.v-on
v-on用来绑定事件监听.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.min.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> </head> <body> <div id="app"> <div v-show="show">这是一段测试文本</div> <button v-on:click="handleHide">点击隐藏</button> </div> <script> var app = new Vue({ el: "#app", data: { show: true }, methods: { handleHide: function() { this.show = this.show ? false : true } } }) </script> </body> </html>
除了click以外还有dbclick、keyup、mousemove。
keyup/keydown： 按下按键或松开
dbclick：连续两次双击触发
mousemove：鼠标移动
当然这里还可以使用一个内联语句的写法。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.min.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> </head> <body> <div id="app"> <div v-show="show">这是一段测试文本</div> <button v-on:click="show?show=false:show=true">点击隐藏</button> </div> <script> var app = new Vue({ el: "#app", data: { show: true }, }) </script> </body> </html>