Vue——第四节：模板语法

lxl。。

于 2020-04-01 15:48:21 发布

阅读量95

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/lxl513513/article/details/105246479

版权

Vue 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

1.v-once

通过使用v-once命令，能执行一次性地插值，当数据改变时，插值处的内容不会更新。

示例如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" ></script>
	</head>
	<body>
		<div id="app">
			<h1>{{msg}}</h1>
			<h1 v-once>{{msg}}</h1>
		</div>
		
		<script type="text/javascript">
			let app=new Vue({
				el:"#app",
				data:{
					msg:"hello vue"
				}
			})
		</script>
	</body>
</html>

效果如下：

在这里插入图片描述
当修改msg值，可以发现，被v-once修饰的值未被改变

2.v-html

双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，则需要使用 v-html 指令，但是在站点上动态渲染的任意HTML可能会非常危险，因为很容易导致XSS攻击

示例如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" ></script>
	</head>
	<body>
		<div id="app">
			<h1>{{htmlTxt}}</h1>
			<!-- 插入HTMl内容 -->
			<h1 v-html="htmlTxt">{{htmlTxt}}</h1>
		</div>
		
		<script type="text/javascript">
			let app=new Vue({
				el:"#app",
				data:{
					htmlTxt:'<span>hello</span>'
				}
			})
		</script>
	</body>
</html>

显示效果：

在这里插入图片描述

3.v-bind（绑定）

可以用于响应式底更新HTML attribute：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			#login{
				background-color: skyblue;
			}
			#register{
				background-color: pink;
			}
		</style>
		<script src="js/vue.js" type="text/javascript" ></script>
	</head>
	<body>
		<div id="app">
			/* 修改属性的内容 */
			/*v-bind:id可以写为：bind:id或:id*/
			<div v-bind:id="idname">
				<h1>登陆</h1>
			</div>
		</div>
		
		<script type="text/javascript">
			let app=new Vue({
				el:"#app",
				data:{
					idname:"login"
				}
			})
		</script>
	</body>
</html>

在这里插入图片描述
改变id的值

4.表达式应用

示例如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" ></script>
	</head>
	<body>
		<div id="app">
			<div >
				{{firstname+lastname}}
			</div>
			/* 三元运算符 */
			<div >
				{{isVip?"欢迎VIP用户回来":"普通用户请充值"}}
			</div>
		</div>
		
		<script type="text/javascript">
			let app=new Vue({
				el:"#app",
				data:{
					firstname:"张",
					lastname:"三",
					isVip:true
				}
			})
		</script>
	</body>
</html>