Vue——渲染（文本、列表）、列表数据更新

最新推荐文章于 2025-06-30 17:54:54 发布

TimChen666

最新推荐文章于 2025-06-30 17:54:54 发布

阅读量1.1w

点赞数

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.csdn.net/lihaoen666/article/details/78124521

vue 专栏收录该内容

16 篇文章

订阅专栏

本文详述了Vue中如何进行文本渲染，包括使用{{ }}、v-html和v-text。接着讨论了列表渲染，利用v-for指令处理数组实例，并给出了添加序号、依据索引应用不同类名的示例。最后，文章探讨了列表数据的同步更新问题，解释了哪些操作会触发数据更新，以及如何通过Vue.set()方法正确地更新属性值。

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

文本渲染

方法

把内容写在双话括号内，也可以写简单的js表达式。（加减乘除，三元运算符等）

v-html

将模版便签内的内容展示到页面

v-text

将模版便签以及内容展示到页面

实例

<template>
    <div>
        <p v-text = 'hello'></p>
        <p v-html = 'hello'></p>
    </div>
</template>

<script>
    export default {
        data(){
            return {
                hello : '<span>world</span>'
            }
        }
    }
</script>

渲染结果

v-test

<span>world</span>

v-html

world

列表渲染

方法

v-for

data为数组实例1

与{{ }}配合使用


<template>
    <div>
       <ul>
                     // 遍历内容            输出的样式设置
          <li v-for = 'item in list'> {{ item.name }} - {{item.price}}</li>
       </ul>
    </div>
</template>

<script>
    export default {
        data(){
            return {
                // 一个数组，参数是对象
                list: [
                {
                  name: 'apple',
                  price: '5'
                },
                {
                  name: 'banana',
                  price: '6'
                },
                ]
            }
        }
    }
</script>

data为数组实例2

与v-test配合使用

<template>
    <div>
       <ul>
                      // 遍历内容         输出的样式设置
          <li v-for = 'item in list' v-text = "item.name + '-' +item.price" ></li>
       </ul>
    </div>
</template>

使用实例

添加序号

<template>
    <div>
       <ul>
                     //增加参数index
          <li v-for = '(item, index) in list'> {{ item.name }} - {{item.price}} - {{index}}</li>
       </ul>
    </div>
</template>

根据索引不同，添加不同class

给所有索引为奇数（实际上的偶数）的li，加上class = odd

<template>
    <div>
       <ul>
                                                      //添加odd类  条件是索引能整除2
          <li v-for = "(item, index) in list"  :class= "{odd: index % 2}"> {{ item.name }} - {{item.price}} - {{index}}</li>
       </ul>
    </div>
</template>

data是对象实例

objList:{
    name: 'Tim',
    age: '22',
    weight: '55'
}

//只有一个参数时，为value值

<ul>
                      //这里是value
          <li v-for = "value in objList"> {{ value }} </li>
</ul>

//两个个参数时，写成（value，key）

<ul>
                      //这里是value
          <li v-for = "(value,key) in objList"> {{ key + value }} </li>
</ul>

列表数据同步更新

以下方法会触发数据更新

push()  pop()  shift()  unshift()  splice()  sort()  reverse()

以下方法不会触发数据更新

filter()  concat()  slice()

以及

1）通过下标，改变值

2）改变数组长度

实例

<template>
    <div>
       <ul>
                     //增加参数index
          <li v-for = "(item, index) in list"> {{ item.name + '-' + item.price }}</li>
       </ul>
       //通过v-on指令添加click事件，click事件调用addItem方法
       <button v-on:click = 'addItem'>addItem</button>
    </div>
</template>


<script>
    export default {
        data(){
            return {
                list: [
                {
                  name: 'apple',
                  price: '5'
                },
                {
                  name: 'banana',
                  price: '6'
                },
                ]
            }
        },
        //使用methods创建addItem方法
        methods: {
          addItem (){
              // 数据是一个数组，所以使用list
              this.list.push({
                  name: 'pineapple',
                  price: 200
              })
          }
        }
    }
</script>

解决方案

解决——重设属性值

使用Vue.set( )方法

语法

    Vue.set(目标数组，索引，替换值)

实例

记得记得，组件要import Vue！！！


 methods: {
          addItem (){
              //使用Vue.set()方法
              Vue.set(this.list,1,{
                name: 'pineapple',
                price: 200
              })
          }
        }