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

文本渲染

方法

{{ }}

把内容写在双话括号内，也可以写简单的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 : 'world'
            }
        }
    }
script>

渲染结果

v-test

world

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值


                      //这里是value
          
for = "value in objList"> {{ value }} 


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


                      //这里是value
          
for = "(value,key) in objList"> {{ key + value }} 

列表数据同步更新

以下方法会触发数据更新

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'>addItembutton>
    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
              })
          }
        }