v-text的用法
v-text指令用于将数据填充到标签中,作用于插值表达式类似,但是没有闪动问题 (如果数据中有HTML标签会将html标签一并输出 )注意:此处为单向绑定,数据对象上的值改变,插值会发生变化;但是当插值发生变化并不会影响数据对象的值<div id="app"><!--注意:在指令中不要写插值语法直接写对应的变量名称在 v-text 中 赋值的时候不要在写 插值语法一般属性中不加
·
v-text指令(相当于原生js中的innerText)
用于将数据填充到标签中,作用于插值表达式类似,但是没有闪动问题 (如果数据中有HTML标签会将html标签一并输出 )
注意:此处为单向绑定,数据对象上的值改变,插值会发生变化;但是当插值发生变化并不会影响数据对象的值
<div id="app">
<!--
注意:在指令中不要写插值语法 直接写对应的变量名称
在 v-text 中 赋值的时候不要在写 插值语法
一般属性中不加 {{}} 直接写 对应 的数据名
-->
<p v-text="msg"></p>
<p>
<!-- Vue 中只有在标签的 内容中 才用插值语法 -->
{{msg}}
</p>
</div>
<script>
new Vue({
el: '#app',
data: {
msg: 'Hello Vue.js'
}
});
</script>
v-html指令(相当于原生js中的innerHTML)
用法和v-text 相似 但是它可以将HTML片段填充到标签中
可能有安全问题, 一般只在可信任内容上使用 v-html
,永不用在用户提交的内容上
它与v-text区别在于v-text输出的是纯文本,浏览器不会对其再进行html解析,但v-html会将其当html标签解析后输出。
<div id="app">
<p v-html="html"></p> <!-- 输出:html标签在渲染的时候被解析 -->
<p>{{message}}</p> <!-- 输出:<span>通过双括号绑定</span> -->
<p v-text="text"></p> <!-- 输出:<span>html标签在渲染的时候被源码输出</span> -->
</div>
<script>
let app = new Vue({
el: "#app",
data: {
message: "<span>通过双括号绑定</span>",
html: "<span>html标签在渲染的时候被解析</span>",
text: "<span>html标签在渲染的时候被源码输出</span>",
}
});
</script>
更多推荐
已为社区贡献1条内容
所有评论(0)