Vue数据渲染详解：插值、v-text/v-html、v-if/v-show、v-for-优快云博客

本文链接：https://blog.youkuaiyun.com/huangguanhang/article/details/124693875

本文详细介绍了Vue中的数据渲染，包括插值表达式{{}}及其闪烁现象、v-text和v-html的使用区别，以及条件渲染v-if和v-show的对比。同时，还讲解了v-for循环展示数据，特别是如何根据后端返回的状态码进行数据绑定。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一插值表达式

1插值表达式就是vue实现数据渲染到页面的方式，不需要进行Dom操作直接将数据展示在页面

2插值表达式就是 {{}} 里面可以执行代码

但是我们要注意使用插值表达式渲染数据的时候会出现插值闪烁的现象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>插值闪烁</title>
    <script src="../vue.min.js"></script>
</head>
<body>
<!--  使用插值表达式会出现插值闪烁的问题-->
    <div id="constior">
        <h1>{{name}}</h1>
    </div>
<script>
    setInterval(()=>{
        new Vue({
                el:"#constior",
                data:{
                    name:"出现卡顿"
                }
            })
    },3000)
</script>
</body>
</html>

这里我们通过定时器可以看到当网络延迟加载的时候，我们可以在页面中看到插值表达式的语法，只有网络加载好之后数据才会渲染

二，通过v-text和v-html 渲染数据

在JavaScript中，数据渲染通过：innerText innerHTML

在jQuery中，数据渲染通过：text() html()

在vue中，数据渲染通过：v-text v-html

1 v-text

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-text</title>
    <script src="../vue.min.js"></script>
</head>
<body>
<div id="constior">
    <h1 v-text="name"></h1>
    <h2 v-text="ljie"></h2>
</div>
<script>
    new Vue({
        el:"#constior",
        data:{
            name:"出现卡顿",
            ljie:"<a href='http://www.huya.com'>欢迎来到虎牙</a>"
        }
    })
</script>
</body>
</html>

在这里我们的a标签就和原生js的效果一样ljie里面的超链接不能使用也就是v-text只能识别内容不能识别标签

2 v-html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-html</title>
    <script src="../vue.min.js"></script>
</head>
<body>
<div id="constior">
    <h1 v-html="name"></h1>
    <h2 v-html="ljie"></h2>
</div>
<script>
    new Vue({
        el:"#constior",
        data:{
            name:"出现卡顿",
            ljie:"<a href='http://www.baidu.com'>欢迎来到百度</a>"
        }
    })
</script>
</body>
</html>

代码运行后我们可以发现v-html里面的超链接是可以跳转的

二，条件渲染 v-if&v-show

v-if根据条件进行渲染

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue.min.js"></script>
</head>
<body>
<div id="ball">
    <h1 v-if="bo">天气真好</h1>
    <h1 v-else-if="bol">下雨了</h1>
    <h1 v-else>雷暴雨</h1>

</div>
<script>
    new Vue({
        el:'#ball',
        data:{
            bo:false,
            bol:false,
        }
    })
</script>
</body>
</html>

这里面的v-if v-else-if v-else 和原生的if(){ }else if(){ }else{ }效果是一样的

v-show根据条件判断是否显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue.min.js"></script>
</head>
<body>
<div id="ball">
    <h1 v-show="cl">风和日丽</h1>
</div>
<script>
    new Vue({
        el:'#ball',
        data:{
            cl:true
        }
    })
</script>
</body>
</html>

3,二者的区别

v-if和v-show区别： 1、v-if - 如果条件成立，那么创建该标签，如果条件不成立，那么销毁该标签【创建销毁】 - 创建和销毁，是直接操作DOM进行的 - 运行时，不经常切换或者条件不经常更改，则使用v-if

2、v-show - 如果条件成立，那么显示该标签，如果条件不成立，那么隐藏该标签【显示隐藏】 - 显示和隐藏，是通过css属性设置 - 运行时，频繁切换，则使用v-show

注意：v-if只有当条件成立，才会创建标签，v-show不管条件成立不成立，第一次都会创建该标签

三·v-for循环展示数据

1循环普通数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue.min.js"></script>
</head>
<body>
<ul id="class">
    <li v-for="(item,index) in array">下标：{{index}}数据：{{item}}</li>
</ul>
<script>
    new Vue({
        el:"#class",
        data:{
           array: ['12','123','1234',12345]
        }
    })
</script>
</body>
</html>

2遍历对象数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue.min.js"></script>
</head>
<body>
<div id="app">
    <table border="1" cellspacing="0" >
        <thead>
        <tr>
            <td>序号</td>
            <td>姓名</td>
            <td>年龄</td>
            <td>性别</td>
            <td>操作</td>
        </tr>
        </thead>
        <tbody >
        <tr v-for="(item ,index) in array" >
            <td>{{index+1}}</td>
            <td>{{item.username}}</td>
            <td>{{item.age}}</td>
            <td>{{item.sex}}</td>
            <td><a href="#">编辑</a>
                <a href="#">删除</a></td>
        </tr>
        </tbody>
    </table>
</div>

 <script>
     new Vue({
         el:'#app',
         data:{
             array:[{
                 username:"张三",
                 age:13,
                 sex:"男"
             },{
                 username:"李四",
                 age:14,
                 sex:"男"
             },{
                 username:"张世俊",
                 age:15,
                 sex:"男"
             },{
                 username:"段思雨",
                 age:16,
                 sex:"男"
             },]
         }
     })
 </script>
</body>
</html>

扩展根据后端返回数据的状态码进行遍历

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue.min.js"></script>
</head>
<body>
<div id="app">
    <ul v-if="obj.code==101">
        <li v-for="item in obj">{{item}}</li>
    </ul>
</div>

<script>
    new Vue({
        el:'#app',
        data: {
        obj: {

            code: 101,
            message: "查询成功",
            datas: "我是数据"


        }}

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

这里是只有状态码为101时候才会遍历数据

四数据绑定 v-on

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue.min.js"></script>
</head>
<body>
<div id="app">
<!--    vue 事件绑定-->
    <h1>Vue事件绑定</h1>
    <button v-on:dblclick="alert(1+1)">双击</button>
    <button v-on:dblclick="vueclick()">双击事件</button>
    <button v-on:dblclick="getDate()">双击获取数据</button>
    <button v-on:dblclick="getDate">双击获取数据</button>
    <button v-on:dblclick="getDate('啥时候可以出去')">设置数据</button>
    <button @:dblclick="getDate('简写')">简写</button>

</div>

<script>
  function vueclick() {
  alert("vueclick")
  }
  let vue = new Vue({
      el:'#app',
      data:{
          message:"今天是个好日子"
      },
      methods:{
      getDate(params) {
      alert(params)
  }
      }
  })
    // function getDate() {
    //  alert(vue.message)
    // }
</script>
</body>
</html>

Vue的数据渲染