差值操作mustache语法-双大括号

最新推荐文章于 2023-04-07 00:40:33 发布

追星星の人

最新推荐文章于 2023-04-07 00:40:33 发布

阅读量487

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/yuan_21/article/details/106736028

版权

Vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

案例：

主要介绍mustache语法中内容可以是变量，也可以是变量组合而成的表达式。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div id="app">
<!-- mustache语法中，不仅仅可以直接写变量，也可以写简单的表达式 -->
	你好:{{message}}<br>
	{{name1 + name2}}<br>
	{{name1 + ' ' + name2}}<br>
	{{count * 2}}<br>
</div>
<script src="../js/vue.js"></script>
<script>
	const app1=new Vue({
		//let(es6定义变量) /const（es6定义常量）
		el:'#app',//挂载要管理的元素
		data:{
			message:'Vue!',
			name1:'one',
			name2:'two',
			count:10
		}	
	})
</script>
</body>
</html>

运行结果

其他命令操作

v-once
设定后，数据内容不随界面而随意改变
该指令表示元素和组件只渲染一次，不会随着数据的改变而改变，即即使更改了变量的值，页面显示内容也不改变。

<body>
<div id="app">
<!-- mustache语法中，不仅仅可以直接写变量，也可以写简单的表达式 -->
	<h2 v-once>{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
	const app1=new Vue({
		//let(es6定义变量) /const（es6定义常量）
		el:'#app',//挂载要管理的元素
		data:{
			message:'Vue!',
		}	
	})
</script>
</body>

v-html
当我们从服务器请求到的数据本身就是一个HTML代码，如果我们直接通过{{}}来输出，会将HTML代码一起输出，可以使用v-html命令将字符串按照html进行解析并渲染。

<body>
<div id="app">
<!-- mustache语法中，不仅仅可以直接写变量，也可以写简单的表达式 -->
	<h2 >{{message}}</h2>
	<h2 v-html="message"></h2>
</div>
<script src="../js/vue.js"></script>
<script>
	const app1=new Vue({
		//let(es6定义变量) /const（es6定义常量）
		el:'#app',//挂载要管理的元素
		data:{
			message:'<a href="http://www.baidu.com">百度一下</a>',
		}	
	})
</script>
</body>

3、v-pre
v-pre用于跳过这个元素和它的子元素的编译过程，用于显示原本的Mustache语言

<h2 v-pre>{{message}}</h2>

4、v-cloak
防止由于网络原因出现显示内容转变

<body>
<div id="app">
<!-- mustache语法中，不仅仅可以直接写变量，也可以写简单的表达式 -->
	<h2 >hello: {{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
	//在vue解析之前，div中有一个属性v-cloak
	//在vue解析之后，div中没有属性v-cloak
	setTimeout(function(){
		const app = new Vue({
			el:'#app',//挂载要管理的元素
			data:{
				message:'Vue!'
			}	
		})
	},1000)
</script>
</body>

追星星の人

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
差值操作mustache语法-双大括号

案例：主要介绍mustache语法中内容可以是变量，也可以是变量组合而成的表达式。<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title></head><body><div id="app"><!-- mustache语法中，不仅仅可以直接写变量，也可以写简单的表达式 -
复制链接

扫一扫