Vue-Vue文本渲染三種方法 {{}}、v-html、v-text

本文轉載自查看原文 2018-02-24 16:38 33451 Vue

{{ }}

將元素當成純文本輸出

v-html
v-html會將元素當成HTML標簽解析后輸出

v-text
v-text會將元素當成純文本輸出

代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue文本渲染三種方法</title>
</head>
<body>
    <div id="app">
         <!--   {}}/v-text不能解析html元素，只會照樣輸出 -->
         <p>{{hello}}</p>
        <p v-text = 'hello'></p>
        <p v-html = 'hello'></p>
    </div>
</body>
<script src="vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            hello:'<span>hello world</span>'
        }
    })
</script>
</html>

運行結果：

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 vue - v-text 和 v-html vue2.0 之文本渲染-v-html、v-text 橫沖直撞vue(第三篇)：vue中template的三種寫法、v-bind、v-on、更新元素的指令v-text與v-html、條件渲染指令v-if 與v-show、v-for vue.js 使用 v-text 和 v-html vue 中 {{}} 和 v-text 和 v-html 區別 Vue中v-text和v-html的用法和區別 Vue：v-on、v-bind、v-model、v-text、v-html用法 vue 插值，v-once,v-text, v-html Vue學習筆記二：v-cloak，v-text，v-html的使用 vue入門的第一天：v-clock、v-text、v-html的使用