Vue常见指令

Vue常见的内置指令

1. v-text : 更新元素的 textContent
2. v-html : 更新元素的 innerHTML
3. v-if : 如果为 true, 当前标签才会输出到页面
4. v-else: 如果为 false, 当前标签才会输出到页面
5. v-show : 通过控制 display 样式来控制显示/隐藏
6. v-for : 遍历数组/对象
7. v-on : 绑定事件监听, 一般简写为@
8. v-bind : 强制绑定解析表达式, 可以省略 v-bind
9. v-model : 双向数据绑定
10. ref : 指定唯一标识, vue 对象通过$els 属性访问这个元素对象
11. v-cloak : 防止闪现, 与 css 配合: [v-cloak] { display: none }

简单的代码演示如下：

			
baidu.com
			提示
			

			
{{msg}}

 

		
		

v-model : 双向数据绑定指令

使用 v-model 对表单数据自动收集
1) text/textarea
2) checkbox
3) radio
4) select
见如下代码：

			

				用户名：
				


				密码：
				


				性别：
				
				女
				
				男


				爱好：
				
				篮球

				
				足球

				
				乒乓球


				城市：
				
					未选择
					{{city.name}}
				


				 介绍：
				


				
			


		
		

效果如下：