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>