Vue_ElementUI之5_vue模板

最新推荐文章于 2024-05-16 02:31:08 发布

RobotB

最新推荐文章于 2024-05-16 02:31:08 发布

阅读量205

点赞数

分类专栏： Web前端

本文链接：https://blog.csdn.net/m0_47572402/article/details/113809747

版权

Web前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本文适用于Web入门级或偏中级前端爱好者等，内容是作者在51CTO的学习笔记，提交于github，有时候也没时间更新CSDN，github对于部分同学可能也有一定的难度，本着开源的精神，较入门偏引导的小篇幅学习资料进行分享，希望对大家有帮助，也感谢大家的三联，我们走起！学到知识就好哦！知识版权申明，本知识体系是51CTO某位老师的课程，鉴于老师已在51CTO取得收益，故我不再进行版权申明和导流并作为知识技能分享，也希望老师看到能理解。

5_vue模板

5_1直接输出Vue变量

{{Vue变量}}
vm.$data.key

5_2输出解析后的HTML变量

v-html

5_3在HTML属性中输出变量

v-bind

5_4输出JS表达式

{{number+1}}
{{ok?‘yes’:‘no’}}
{{message.split(’’).reverse().join(’’)}}

5_5示例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>5_vue模板</title>
</head>
<body>

<!--DOM-->
<div id="app">
<div>
	str={{str}}
</div>
<div>
	name=vm.$data.user.name<br>
	age={{user.age}}<br>
</div>

<div>
	<ul>
		<li>{{names[0]}}</li>
		<li>{{names[1]}}</li>
		<li>{{names[2]}}</li>
	</ul>
</div>
<div>
	html={{html}}<br>
</div>
<div v-html="html"></div>
<a v-bind:href="link.link">{{link.name}}</a><br>
<a :href="link.link">{{link.name}}</a>
</div>

<!--引入vue-->
<script src="../js/vue.js"></script>

<!--javascript-->
<script>
<!--vue&javascript-->
	var data={
	str:'xu',
	user:{
	name:'xu',
	age:'20'
	},
	names:['Tom','Bob','Robot'],
	html:'<font color=Red>xuzhiyong</font>',
	link:{
		name:'home',
		link:'http://www.baidu.com'	
	}
	};
	var vm=new Vue({
	el:'#app',
	data:data,
	});
	console.log(vm.$data.user.name)
</script>
</body>
</html>