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>

 

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐