vue --- > v-html、v-bind

v-html

// 有时候,我们需要展示<strong>,但直接使用下面的语法并不会显示
<div id = "app">{{name}}</div>

<script>
    let app = new Vue({
        el:'#app',
        data:{
            name:'<strong>啦啦啦</strong>'
        }
    });
</scritp>
// 结果当然没让人失望

此时需要 v-html来显示

<div id ="app">
    <div v-html="name"></div>
</div>
<script>
    let app =new Vue({
        el:'#app',
        data:{
            name:'<strong>啦啦啦</strong>'
        }
    });
</script>

v-bind:

// 前面strong标签绑定进了html页面,接下来是要赋予html页面间元素属性了.
// href属性
<div id = "app">
    <a v-bind:href="link">百度官网</a>
</div>
<script>
    let app = new Vue({
        el:'#app',
        data:{
            link:'https://www.baidu.com'
        }
    })
</script>

// ps: v-bind:href="link"实际上等价于: href = link,  link = "https://www.baidu.com"

// 上文v-bind可以简写为 :
<div id = "app">
    <a :href="link">百度官网</a>     <br>
    <button :disabled="myFalse">按钮被禁用</button>
</div>
<script>
    let app = new Vue({
        el:'#app',
        data:{
            link:'https://www.baidu.com',
            myFalse:'false'
        }
    });
</script>

参考 https://mp.weixin.qq.com/s?__biz=MzA3MDg1NzQyNA==&mid=2649654456&idx=1&sn=8ca7c9064f20328fcdce86fa3c6bce6b&chksm=872c4307b05bca11ec7a403cb9ce7ff62d45dcd3c6549cd3d2b5672b7c79abee0fc1c75e90f6&scene=21#wechat_redirect