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

这篇文章主要介绍“vue中的指令和插值怎么使用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“vue中的指令和插值怎么使用”文章能帮助大家解决问题。

创新互联建站主要从事成都网站制作、成都网站建设、外贸营销网站建设、网页设计、企业做网站、公司建网站等业务。立足成都服务婺城,十年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18980820575

一、安装vue

直接使用script标签引入

二、Vue模板案例

步骤

1、引入vue框架
2、定义1个盒子(根节点)
3、定义1个script标签

3.1、定义js对象(根组件)
3.2、通过vue创建1个应用
3.3、将应用挂载到根节点(第二步中创建的盒子)

data():存放页面中显示数据的地方



	
		
		
		
		

	
	
		
		
			

{{title}}

{{name}}

三、基础模板(记住)



	
		
		
		
		
	
	
		
		

四、vue的指令和插值

1、{{}}:插值表达式的语法

{{}}:可以在html中引用data中定义的数据

{{name}}

2、v-text:填充纯文本内容(data中的值)

效果和innerText一样

3、v-html:填充html(data中的值)

效果和innerHtml一样

4、v-pre:填充原始数据

防止vue对标签进行渲染(标签中写的什么,就显示什么)

显示两个花括号,中间为js:{{}}



	
		
		
		
		
	
	
		
		
			

{{name}}

{{age}}

{{sex}}

info中的a1:{info.a1}

info中的a2:{info.a2}


显示两个花括号,中间为js:{{}}

效果展示:

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

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为隐藏

py

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中的指令和插值怎么使用

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


分享文章:vue中的指令和插值怎么使用
转载来于:http://pwwzsj.com/article/jhdghg.html

其他资讯