本章讲解的是Vue指令中关于显示切换和属性绑定的内容
方法
1.显示切换之v-show
该指令表示根据表达式的真假，切换元素的显示与隐藏
应用实例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="js/vue.js"></script> <title>Vue指令</title> </head> <body> <div id="app"> <input type="button" value="显示/隐藏" @click="toggle"/><br/> <p v-show="flag">{{message}}</p> </div> <script> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!', flag: false }, methods:{ toggle:function(){ this.flag = !this.flag; } } }) </script> </body> </html>
页面显示效果如下，当点击按钮时文字就会显示，再次点击则消失，如此往复！
v-show其实是在元素中加入了display的属性使其隐藏！
2.显示切换之v-if
该指令表示根据表达式的真假，切换元素的显示与隐藏。
这里有人可能会有疑问了，这不是和v-show是一样的吗？这个后面再说。
我们将上面的例子替换为v-if：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="js/vue.js"></script> <title>Vue指令</title> </head> <body> <div id="app"> <input type="button" value="显示/隐藏" @click="toggle"/><br/> <p v-if="flag">{{message}}</p> </div> <script> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!', flag: false }, methods:{ toggle:function(){ this.flag = !this.flag; } } }) </script> </body> </html>
我们发现，其可以达到和上一个例子同样的效果！
但他具体和v-show有什么区别呢？观察实现的本质：
我们发现这个p元素完全的被移除了，v-if操纵的dom元素，而v-show操纵的是样式！
3.属性绑定之v-bind
之前我们展示了元素的显示与隐藏，那么元素的属性如何设置呢？那就要用到v-bind了！
语法：v-bind:属性名=表达式
应用实例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="js/vue.js"></script> <title>Vue指令</title> </head> <body> <div id="app"> <input type="button" value="显示/隐藏" @click="toggle"/><br/> <p v-if="flag">{{message}}</p> </div> <script> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!', flag: false }, methods:{ toggle:function(){ this.flag = !this.flag; } } }) </script> </body> </html>
页面效果如下，我们可以发现，当点击切换按钮的时候，文本框的值随之改变啦！
但是，使用该指令还是有点麻烦，所以vue为我们提供了简写方式，即v-bind:可以简写为:
观察如下示例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="js/vue.js"></script> <title>Vue指令</title> </head> <body> <div id="app"> <input type="text" :value="message"/><br/> <input type="button" value="切换" @click="change"/><br/> </div> <script> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!', flag: false }, methods:{ change:function(){ this.message += "!"; } } }) </script> </body> </html>