Vue.js入门与商城开发实战
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

2.2　v-html指令

如果我们展示的数据包含元素标签或者样式，通俗来讲就是数据中包含HTML和CSS代码；我们想展示标签或样式所定义的属性作用，该怎么进行渲染？比如展示内容为：<h1>这是一个h1元素内容</h1>，我们需要使用v-html指令来输出HTML代码。

注意：

·带有前缀v-的指令需要添加在DOM元素上，v-html指令后面没有{{}}，直接写变量名称。

·不能使用v-html来与局部模板复合使用，因为Vue不是基于字符串的模板引擎。组件更适合担任UI重用与复合的基本单元。如果尝试在v-html绑定的结构中再添加其他内容（无论是文本还是html），都会被忽略。如果后端返回包含了标签的内容，可以转化为html页面的形式展示。

下面我们来看一个实例：在data代码块中定义message和message2两个变量，message是普通的纯文本，message2是带有html代码的文本，我们在html视图将两个变量都使用普通变量模式输出和使用v-html指令输出，从而进行对比。完整的示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>模板语法-数据绑定-文本插值</title>
    <!--加载本地vue.js的框架-->
    <script src="vue2.2.2.min.js"></script>
</head>
<body>
<!--定义div代码块的id的值，这里定义的值为app，后面Vue会使用该值-->
    <div id="app">
        <!--显示属性message的值-->
         <p>{{ message }}-外面内容（显示在页面）</p>
        <!--显示属性message2的值，会将html代码标签H1显示出来-->    
        <p>{{ message2 }}-外面内容（显示在页面）</p>
        <!--显示属性message的值-->
        <p v-html="message">外面内容（不显示）</p>    
        <!--显示属性message2的值，会将html代码标签H1“解析”出来-->            
        <p v-html="message2">外面内容（不显示）</p>    
    </div>
    
    <script>
    new Vue({
        el: '#app',//app为前面div代码块的id的值，通过“#”绑定
        //data区域定义属性的值
        data: {
            message: '普通文本变量', //定义属性message的值，不带html标签，纯文字
        message2: '<h1>带html代码的变量<h2>', //定义属性message2的值，带html标签
        }
    })
    </script>
</body>
</html>

效果如图2-2所示。

图2-2　普通变量输出与v-html指令输出

上一章目录下一章