Vue入门（四）Vue指令之显示切换和属性绑定

前言

      本章讲解的是Vue指令中关于显示切换和属性绑定的内容

方法

1.显示切换之v-show

该指令表示根据表达式的真假，切换元素的显示与隐藏

应用实例：

	
		
		
		
	
	
		

		   

		   
{{message}}
		
		
	

页面显示效果如下，当点击按钮时文字就会显示，再次点击则消失，如此往复！

观察实现的本质：

v-show其实是在元素中加入了display的属性使其隐藏！

2.显示切换之v-if

该指令表示根据表达式的真假，切换元素的显示与隐藏。

这里有人可能会有疑问了，这不是和v-show是一样的吗？这个后面再说。

我们将上面的例子替换为v-if：

	
		
		
		
	
	
		

		   

		   
{{message}}
		
		
	

我们发现，其可以达到和上一个例子同样的效果！

但他具体和v-show有什么区别呢？观察实现的本质：

我们发现这个p元素完全的被移除了，v-if操纵的dom元素，而v-show操纵的是样式！

3.属性绑定之v-bind

之前我们展示了元素的显示与隐藏，那么元素的属性如何设置呢？那就要用到v-bind了！

语法：v-bind:属性名=表达式

应用实例：

页面效果如下，我们可以发现，当点击切换按钮的时候，文本框的值随之改变啦！

但是，使用该指令还是有点麻烦，所以vue为我们提供了简写方式，即v-bind:可以简写为:

观察如下示例：

我们同样可以达到相同的效果！