Vue 数据渲染详解-优快云博客

本文链接：https://blog.youkuaiyun.com/DFXVHG/article/details/124691103

本文介绍了Vue.js中的数据渲染，包括插值表达式、v-text、v-html、v-if与v-show的区别以及它们如何解决插值闪烁问题。还讨论了v-for指令用于循环遍历数据，以及事件处理v-on的使用。内容涵盖了如何在Vue中进行条件渲染和循环渲染。

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

1、插值表达式

插值表达式：一般指定变量和表达式

{{password}}
{{11+10}}

插值闪烁

当数据不是预定义的时候，而是通过网络进行获取的，那么当网络延迟加载时，页面中会显示插值表达式的语法，等网络加载完毕后，数据进行渲染，这种现象称之为：插值闪烁
{{a3}},{{a2}},{{a1}}

v-text&v-html

vue里，数据渲染通过：v-text， v-html，与JavaScript数据渲染：innerText innerHTML。一样的功能

v-text

v-text可以解决插值闪烁，但只能渲染纯文本的数据

v-html

v-html不仅可以解决插值闪烁，而且可以渲染纯文本和标签

v-if&v-show

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

<body>
<div id="container">
    <h1 style="color:red;" >今天三星五费了吗？</h1>
    <h1 style="color:red;" v-if="name">有</h1>
    <h1 style="color:red;" v-else-if="user">没有</h1>
</div>
</body>

<script>
    new Vue({
        el:"#container",
        data:{
            name:false,
            user:true
        }
    })
</script>

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

<body>
<div id="container">
    <h1 style="color:red;" >今天三星五费了吗？</h1>
    <h1 style="color:red;" v-if="name">有</h1>
    <h1 style="color:red;" v-show="user">没有</h1>
</div>
</body>
<script>
    new Vue({
        el:"#container",
        data:{
            name:false,
            user:false
        }
    })
</script>

v-if vs， v-show

v-if和v-show区别：

v-if:假如条件成立，就创建标签，不成立即“销毁”当前标签，是通过dom进行操作的，对于不进行频繁修改的，就使用v-if

v-show：假如条件成立，就创建标签，不成立即“销毁”当前标签，是通过css进行操作的，v-show条件成立或不成立第一次都会创建当前标签

v-for

v-for：循环遍历普通数据

<div id="container">

    <!--
            in前面如果是一个变量，那么该变量保存的是数组中的数据
            <li v-for="item in array">{{item}}</li>
    -->
    <!--
            in前面如果是两个变量，那么第一个变量保存的是数组中的数据，第二个变量保存的是下标
    -->
    <ul>
        <li v-for="(item,index) in array">下标：{{index}}>>姓名：{{item}}</li>
    </ul>
</div>
</body>
</html>
<script>
    new Vue({
        el:"#container",
        data:{
            array:["老王","老六","老张","老三"]
        }
    })
</script>

v-for：循环遍历数组

<style>
    table{
        border: 1px solid pink;
        color: purple;
    }
    table thead{
        background: pink;
        color: deeppink;
    }
    tbody{
        background: bisque;
    }
</style>
<div id="container">

    <!--<ul>
        如果是一个变量，那么该变量保存的是数据【对象】
        <li v-for="item in array">{{typeof item}}</li>
    </ul>-->
    <table border="1" cellspacing="0" >
        <thead>
            <tr>
                <th><input type="checkbox"></th>
                <th>序号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>住址</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(item,index) in array">
                <td><input type="checkbox"></td>
                <td>{{index+1}}</td>
                <td>{{item.name}}</td>
                <td>{{item.age}}</td>
                <td>{{item.sex}}</td>
                <td>{{item.address}}</td>
            </tr>
        </tbody>
    </table>
</div>
</body>
</html>
<script>
    new Vue({
        el:"#container",
        data:{
            array:[
                {
                    name:"老大",
                    age:"21",
                    sex:"男",
                    address:"郑州市"
                },{
                    name:"老二",
                    age:"20",
                    sex:"男",
                    address:"重庆市"
                },{
                    name:"老三",
                    age:"19",
                    sex:"男",
                    address:"北京市"
                },{
                    name:"老四",
                    age:"19",
                    sex:"男",
                    address:"上海市"
                },{
                    name:"老五",
                    age:"17",
                    sex:"男",
                    address:"郑州市"
                }
            ]
        }
    })
</script>

v-for：循环遍历对象

<div id="container">

    <!--
        如果是一个变量，那么保存的是对象中的属性值
-->
    <!--        <li v-for="o1 in obj">{{o1}}</li>-->

    <!--
            如果是两个变量，那么第一个变量保存的是属性值，第二个变量保存的是属性名
    -->
    <!--        <li v-for="(o1,o2) in obj">{{o1}}>>>{{o2}}</li>-->

    <!--
            如果是三个变量，那么第一个变量保存的是属性值，第二个变量保存的是属性名，第三个变量保存的是下标
    -->
    <ul v-if="array.code==101">
        <li v-for="(a1,a2,a3) in array">{{a3}},{{a2}},{{a1}}
        </li>
    </ul>
</div>
</body>
</html>
<script>
    new Vue({
        el:"#container",
        data:{
            array:{
                code:101,
                message:"查询成功",
                data:[
                    {
                        name:"老五",
                        age:"17",
                        sex:"男",
                        address:"郑州市",
                    },
                ],
            },
        },
    })
</script>

后端响应数据到前端的数据格式：
{
  code:2100,       状态码
  message:"描述",  描述说明
  data:[]         数据
}

v-on

vue点击事件

v-on与jquery的click和js里的onclick一样

<body>
<div id="app">
    <h1>{{message}}</h1>
    <button v-on:click="f1()">点击事件</button>
    <button v-on:click="getData(11)">点击事件获取数据</button>
    <button @click="setData('等待那个人围着三环裸奔')">设置数据</button>
    </div>
</body>
</html>
<script>


    function f1() {
        alert("f1")
    }

    let vm = new Vue({
        el:"#app",
        data:{
            message:"保管数据"
        },
        methods:{
            //获取数据
            getData(T) {
                alert(T)
            },
            setData(T) {
                //设置数据
                alert(this.message=T)
            }
        }
    })
</script>

data是保管数据的

methods:里面是设置方法的