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

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

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

直接使用script标签引入

步骤

1、引入vue框架
2、定义1个盒子（根节点）
3、定义1个script标签
3.1、定义js对象（根组件）
3.2、通过vue创建1个应用
3.3、将应用挂载到根节点（第二步中创建的盒子）

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



	
		
		
		
		

	
	
		
		
			{{title}}
			{{name}}

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}

效果展示：

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

js py

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

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

切换显示 py

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

账号: 密码: 登录

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

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

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