vue中的指令和插值怎么使用

	
		
		
		
		

	
	
		
		
			
{{title}}
			
{{name}}
		

	
		
		
		
		
	
	
		
		
			
{{name}}
			
{{age}}
			
{{sex}}
			
info中的a1:{info.a1}
			
info中的a2:{info.a2}
			

			
			
			

效果展示：

5、v-bind：属性绑定

语法：
v-bind:属性=‘值’
简写 :属性=‘值’

{{aInfo.title}}
简写
{{aInfo.title}}

	
		
		
		
		
	
	
		
		
			{{aInfo.title}}
			
			{{aInfo.title}}
		
		
		
		
	

样式绑定

	
		
		
		
		
	
		
	
	
		
		
			
			js
		
		
			
		py

		
		
	

6、v-on：事件绑定

语法：v-on：事件名称=‘执行的方法’
简写
@事件名=‘执行的方法’

切换显示
简写
切换显示

7、v-show：控制元素显示和隐藏的指令

控制元素显示隐藏的指令：
v-show 值为True则显示，值为false为隐藏

methods：定义页面操作过程中调用的函数（vue组件的方法）
注意点：不要直接把方法定义为箭头函数

例如

switchShow()
定义页面操作过程中调用的函数（vue组件的方法）
注意点：不要直接把方法定义为箭头函数

	
		
		
		
		
	
	
		
		
			
			切换显示
			
			
			py
		
		
		
		
		
	

8、v-model：数据的双向绑定

双向绑定只用于表单和组件
页面修改数据会变，数据改变，页面也会改

	
		
		
		
		
	
		
		
		
		
		
		
			
账号:
			
密码:
			登录
		
		
		
		
	

9、v-if、v-else-if、v-else：条件渲染

通过条件来控制元素是否渲染到页面

v-if
v-else-if
v-else

	
		
		
		
		
	
	

		
			{{item}}
			{{item}}
			{{item}}
		
		
		
		
	

10、v-for：遍历对象、数组

案例：根据不同的结果，展示不同文字颜色

	
		
		
		
		
	
	
		
		
			
				
				
					id
					title
					result
					操作
				
				
				
					{{item.id}}
					{{item.title}}
					
					{{item.result}}
					{{item.result}}
					{{item.result}}
					{{item.result}}
					
				
				
				
			
			
		
		
		
		
	

关于“vue中的指令和插值怎么使用”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注创新互联行业资讯频道，小编每天都会为大家更新不同的知识点。