v-html指令渲染HTML结构~DOM模板（六）

<script src="vue.js"></script>

<!--  DOM模板 view 视图层  -->
<div id="demo">
    <!-- 
        文本插值{{}}，双大括号可以渲染数据且还可以进行一些简单的运算。
        如：
        {{1+2}} 结果为3，
        {{true?"yes":"no"}}  结果为yes，
        {{1>2?"true":"false"}}   结果为false

        以下{{html}}只能解析成文本内容，如：<p>hello,Vue.js</p> ，并不能解析成结构
     -->
    {{html}}    
    <div v-html="html"></div>
</div>

// model 数据模型层想要渲染html结构
let obj = {
    html:'<p>hello,Vue.js</p>'    //会替换原始的div标签
}

// Vue实例

var vm = new Vue({
    el:'#demo',
    data:obj
})

1、DOM 模板；

2、字符串模板；template

3、render 函数模板→创建虚拟DOM渲染出来的；

三目运算语法： 条件1？：结果1：结果2。 条件1为真，执行结果1，否则执行结果2；