Vue指令v-html、v-text
- 1、初識Vue指令
- 2、v-html
-
- 3、v-text
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>
