v-text v-html

名字是乱打的

发布于 2021-12-22 15:34:51

1K0

发布于 2021-12-22 15:34:51

文章被收录于专栏：软件工程软件工程

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="<h1>hello</h1>"//不会解析
            document.getElementById("div2").innerHTML="<h1>hello</h1>"//会被解析
        }

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

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>v-text与v-html</title>
        <script src="js/vuejs-2.5.16.js"></script>
    </head>
    <body>
        <div id="app">
            <div id="div1"></div>
            <br>
            <div id="div2"></div>
        </div>
    <hr>
        <div id="vueapp">
            <div v-html="mes1" id="div3"></div>
            <br>
            <div v-text="mes2" id="div4"></div>
        </div>
    </body>
    <script>
        //view model
        //传统js的innerText和innerHTML
        window.onload=function () {//加载时候出发的函数
            document.getElementById("div1").innerText="<h1>hello</h1>"//不会解析
            document.getElementById("div2").innerHTML="<h1>hello</h1>"//会被解析
        }

        /*vue新式innerText和innerHTML*/
        new Vue({
            el:"#vueapp",
            data:{
                mes1:"<h1>hello</h1>",
                mes2:"<h1>hello</h1>"
            }
        })
    </script>
</html>