v-text v-html

ps:全demo级别自学vue.js,前端大佬自行忽略

解读和对比JQuery和vue的写指令

我们用jquery通常向页面写有两种方式

• 加载时不被解析的document.getElementById("div1").innerText=""
• 加载时被解析的document.getElementById("div1").innerHTML=""

vue

同jquery,但是不同的是jquery属于直接通过js写,而我们的vue采用的还是分离式的,这里我们同样讲信息放在vue对象中,而我们可以在标签内使v-text和v-html当作属性来使用,同时挂载我们的vue对象中的json数据.具体的看代码

v-text v-html,加载界面时候触发的写信息.

    //view model
        //传统js的innerText和innerHTML
        window.onload=function () {//加载时候出发的函数
            document.getElementById("div1").innerText="
hello
"//不会解析
            document.getElementById("div2").innerHTML="
hello
"//会被解析
        }

如图下面的innerHTML写的格式会被浏览器在加载界面时候解析,而innerText不会

vue详细代码对比可以看下面的

---

再如
有时,我们可能会从后天获取一个带链接的标签进行展示,但是我们直接展示的话是文本形式不渲染.

代码如下

结果

那么我们想要告诉html进行渲染,就需要用v-html属性.

代码如

结果

---

此外:

我们开发中一般不用v-text,因为这个不够灵活.

比如这里,我们直接用{{}}插值表达式可以后面灵活的拼接内容,而用v-text则会覆盖原内容"李银河".