Vue插值

最新推荐文章于 2024-02-01 17:54:39 发布

俗世凡人行

最新推荐文章于 2024-02-01 17:54:39 发布

阅读量127

点赞数

分类专栏： Vue 文章标签： Vue插值

本文链接：https://blog.csdn.net/weixin_41887155/article/details/107587576

版权

Vue 专栏收录该内容

56 篇文章 0 订阅

订阅专栏

Vue插值

文本

数据绑定最常见的形式就是使用Mustache语法( {{}} )的文本插值;

{{ 变量名 }} v-text指令
v-text指令,指令需要作为一个属性,写在标签里面;<p v-text="msg"></p>
v-html="msg",它会解析标签,不会转义, 上面2中转义了,能防止xss攻击;
一般用{{}}形式;
v-once指令, 也能执行一次性低插值, 当数据改变时, 插值处的内容不会更新;

v-开头的都是指定, 写在属性里面, 以属性的形式使用;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Vue插值语法</title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<p>{{msg}}</p>
		    <p v-text="msg"></p>
			
		    <p v-html="msg"></p>
			<!-- 对数字进行运算,切忌用 ++,会循环 -->
			<!-- <p>{{count-11}}</p> -->
			<!-- 函数运算,全部转化为大写 -->
			<!-- <p>{{msg.toUpperCase()}}</p> -->
			<!-- 三元运算 -->
			<!-- <p>{{ status ? 'login' : 'loginout' }}</p> -->
			<!-- v-once定死值, 后面更改不了 -->
			<p v-once>{{ msg }}</p>
			
			
			
		</div>
	</body>
</html>
<script type="text/javascript">
	var vm = new Vue({
		el:'#app',
		data:{
			msg:'<h1>hello vue</h1>',
			count:2
		}
	})
	
	//console.log(vm.$el)
	//console.log(vm.$data.msg)
	console.log(vm.msg)
	
</script>