v-for遍历数组，对象与响应式方法

2020-08-21 22:04:35 阅读：274 来源： 互联网

v-for

预期：Array | Object | number | string | Iterable (2.6 新增)
用法：

基于源数据多次渲染元素或模板块。此指令之值，必须使用特定语法 alias in expression，为当前遍历的元素提供别名：
```
<div v-for="item in items">
  {{ item.text }}
</div>
```
另外也可以为数组索引指定别名 (或者用于对象的键)：
```
<div v-for="(item, index) in items"></div>
<div v-for="(val, key) in object"></div>
<div v-for="(val, name, index) in object"></div>
```
响应式方法
push() ：在数组后面插入元素
unshift() 在数组前面插入元素
shift() 删除数组前面第一个元素
pop() 删除数组最后面第一个元素

splice()作用：删除元素、插入元素、替换元素
        //第一个参数为开始元素位置
        //删除元素，第二个参数传入删除元素的个数（如果没有传，就是删除后面所有元素）
//        this.letters.splice(1,2)
        //插入元素，第二个参数为0，后面参数为插入元素的值
//        this.letters.splice(1,0,'ff','dd')
        //替换元素，第二个参数为替换元素的个数，后面参数为替换元素的值,要与替换个数相同的元素
//        this.letters.splice(1,2,'ff','dd')



<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-for遍历数组，对象与响应式方法</title>
</head>
<body>
<div id="app">
  <ul>
    <!-- 遍历数组，或遍历数组及其下标index-->
    <li v-for="item in list">{{item}}</li>
    <li v-for="(item,index) in list">{{index}}-{{item}}</li>
    <!-- 遍历对象，或遍历键值对(value,key) ，还可以加上下标index-->
    <li v-for="item in info">{{item}}</li>
    <li v-for="(value,key) in info">{{key}}： {{value}}</li>
    <li v-for="(value,key,index) in info">{{index}}--{{key}}： {{value}}</li>
<!-- key 标识item，item得保障唯一性，为了更高效的dom,例如加入数组一个元素，不绑定key时，
    插入元素后面的元素会后移，如链，绑定key后，就在中间加入元素，其他元素不变，如键值对一样（不是键值对）-->
    <li v-for="item in list" :key="item">{{item}}</li>
  </ul>
  <ul>
    <li v-for="item in letters">{{item}}</li>
  </ul>
  <button @click = "butClick">响应按钮</button>

</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: 'hello',
      list: ['语文','数学','英语'],
      letters: ['a','b','c','d'],
      info: {
        name: 'wu',
        age: 18,
        height: 188,
      }
    },
    methods: {
      sub: function () {
      },
      butClick(){
//       //push() 在数组后面插入元素
//        this.letters.push('ee'),
//        this.letters.push('ee','ff','dd')

//        //unshift() 在数组前面插入元素
//        this.letters.unshift('gg')
//        this.letters.unshift('gg','hh','ii')

//        //shift() 删除数组前面第一个元素
//        this.letters.shift()

//        //pop() 删除数组最后面第一个元素
//        this.letters.pop()

        //splice()作用：删除元素、插入元素、替换元素
        //第一个参数为开始元素位置
        //删除元素，第二个参数传入删除元素的个数（如果没有传，就是删除后面所有元素）
//        this.letters.splice(1,2)
        //插入元素，第二个参数为0，后面参数为插入元素的值
//        this.letters.splice(1,0,'ff','dd')
        //替换元素，第二个参数为替换元素的个数，后面参数为替换元素的值,要与替换个数相同的元素
//        this.letters.splice(1,2,'ff','dd')

        //替换元素的写法
        //1、 数组的值直接改变（错误）
//        this.letters[0] = 'bbb'
        // 2、 splice() 方法替换 （正确，一般用）
//        this.letters.splice
        //3、 vue自带的方法 set(对象，索引值，‘修改后的值’)
//        Vue.set(this.letters,0,'bbb')
      },

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

标签：遍历,letters,数组,删除,元素,响应,splice,替换
来源： https://www.cnblogs.com/chunying/p/13543576.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

v-for遍历数组，对象与响应式方法

v-for