Vue-v-text和v-html的使用

1.v-text:用来获取data中数据将数据已文本的形式渲染到指定标签内部,类似于javascript中的innerText
{ {}}(插值表达式)与v-text的区别:
a.v-tetx取值会将标签中原有的数据覆盖,使用插值表达式不会覆盖标签原有的数据
b.使用v-text可以避免在网络环境比较差的情况下出现插值闪烁

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <span>{
   
   {msg}},admin!</span>
    <br>
    <span v-text="msg">就是就是的就是</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app=new Vue({
     
     
        el:"#app",
        data:{
     
     
            msg:"你好"

        }
    })
</script>
</body>
</html>

在这里插入图片描述
2.v-html:用来获取data中的数据,将数据中含有的HTML标签先解析再渲染到指定标签的内部,类似JavaScript中的innerHTML。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <span>{
   
   {msg}},admin!</span>
    <br>
    <span v-text="msg">就是就是的就是</span>
    <span>{
   
   {message}}</span>
    <br>
    <span v-html="message">三生三世</span>//v-html也会覆盖标签原始的值


</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app=new Vue({
     
     
        el:"#app",
        data:{
     
     
            msg:"你好",
            message:"<a href='vue01.html'>百度一下</a>"

        }
    })
</script>
</body>
</html>

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/dgssd/article/details/111033634