1、初识Vue指令
Vue指令(Directives)通常是指带有v-属性的特殊属性。在Vue给HTML元素增加了自定义属性,它们都是以”v-”开头,并且一些特殊的指令可以带参数和修饰符。指令的职责是:当表达式的值改变时,将其产生的连带影响,响应式地作用于DOM。
2、v-html
v-html:相当于 innerHTML 。内容按普通 HTML 插入,不会作为 Vue 模板进行编译 。
注意:小心XXS攻击,在可信内容上使用v-html,拒绝用户交互下使用该指令。
<body>
<div id="app" v-html="title">
</div>
<script src="./Vuejs/vue2-6-12.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
title:"the first Vue",
name:'zhangjianhua'
}
})
</script>
</body>
3、v-text
v-text:相当于 textContent 。
注意:v-text会替换元素中所有的文本,插值表达式只替换自己,不会清空元素。优先级比插值表达式高。
<body>
<div id="app">
<!-- 将data数据渲染在页面上 -->
<h3 v-text="dec"></h3>
<!-- javascript逻辑运算,注意111也要加上'' -->
<h3 v-text="dec + '111' "></h3>
<!-- 三目运算符 -->
<h3 v-text="1>2 ? '大于' : '小于' "></h3>
<!-- 变量拼接,变量与字符串拼接,得加双引号 -->
<h3 v-text="dec + dec"></h3>
<!-- 在v-text标签中添加内容 -->
<p v-text="dec">
变量是dec
</p>
</div>
<script src="./Vuejs/vue2-6-12.js"></script>
<script>
new Vue({
el:"#app",
data:{
dec:"hello v-text"
}
})
</script>
</body>