Vue 列表渲染指令

作者: puxiaotaoc | 来源:发表于2018-12-31 00:03 被阅读8次

vue列表渲染
Vue 列表渲染指令
条件和列表渲染
2018-09-11
v-for
Vue 循环渲染
vue2.0常用知识点与实践总结
3.Vue第三章
2019-03-09 Vue基础知识
v-for,v-on,v-show,v-if

改变数据同时也修改页面的方法

方法一：通过数组变异的方法：push pop shift unshift splice sort reverse
方法二：通过改变对象引用
方法三：通过set方法

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
  <script src='./vue.js'></script>
</head>

<body>
  <div id="app">
    <div v-for="(item,index) of list" :key="item.id">
      <div>{{item.text}} --- {{index}}</div>
      <span>{{item.text}}</span>
    </div>
  </div>

  <script>
    // Vue中不能通过下标来改变页面数组中的数据，例如 vm.list[1]={id:333,text:"ddg"}
    // 只能通过下列方法：push pop shift unshift splice sort reverse
    // 或者通过改变对象的引用地址：vm.list=[{id: 010011001,text: "hello"}, {id: 010011002,text: "puxiaotaoc"}, {id: 010011003,text: "nice"}]
    var vm = new Vue({
      el: '#app',
      data: {
        list: [{
          id: 010011001,
          text: "hello"
        }, {
          id: 010011002,
          text: "puxiaotao"
        }, {
          id: 010011003,
          text: "nice"
        }]
      }
    })
  </script>
</body>

</html>

// 对象的操作
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
  <script src='./vue.js'></script>
</head>

<body>
  <div id="app">
    <div v-for="(item,key,index) of userInfo">{{item}} --- {{key}} --- {{index}}</div>
  </div>

  <script>
    var vm = new Vue({
      // 实现改变数据也改变页面
      // userInfo: {
      //   name: "puxiaotaoc",
      //   age: 28,
      //   gender: "female",
      //   address: "wuhan"
      // } 改变对象的引用
      // Vue.set(vm.userInfo,"address","wuhan") 全局方法
      // vm.$set(vm.userInfo,"address","wuhan") 实例方法
      el: '#app',
      data: {
        userInfo: {
          name: "puxiaotaoc",
          age: 28,
          gender: "female"
        }
      }
    })
  </script>
</body>

</html>

// 数组的操作
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
  <script src='./vue.js'></script>
</head>

<body>
  <div id="app">
    <div v-for="(item,index) of userInfo">{{item}} --- {{index}}</div>
  </div>

  <script>
    // Vue.set(vm.userInfo,1,5) 全局方法
    // vm.$set(vm.userInfo,2,10) 实例方法
    var vm = new Vue({
      el: '#app',
      data: {
        userInfo: [1, 2, 3]
      }
    })
  </script>
</body>

</html>