数组

  1.   const app = Vue.createApp({
  2.     data() {
  3.       return {
  4.         listArry: ['dell', 'lee', 'teacher'],
  5.         listObject:{
  6.           firstName:'dell',
  7.           lastName:'lell',
  8.           job:'teacher',
  9.         }
  10.       }
  11.     },
  12.     template: `
  13.       <div>
  14.        <div v-for="(item,index) in listArry">
  15.         {{item}}-{{index}}
  16.       </div>
  17.       </div>
  18.     `
  19.   });
  21.   const vm = app.mount('#root');
  22. </script>

对象

image.png

  1.   const app = Vue.createApp({
  2.     data() {
  3.       return {
  4.         listArry: ['dell', 'lee', 'teacher'],
  5.         listObject:{
  6.           firstName:'dell',
  7.           lastName:'lell',
  8.           job:'teacher',
  9.         }
  10.       }
  11.     },
  12.     template: `
  13.       <div>
  14.        <div v-for="(value,key,index) in listObject">
  15.         {{value}}-{{key}}-{{index}}
  16.       </div>
  17.       </div>
  18.     `
  19.   });
  21.   const vm = app.mount('#root');
  1.   const app = Vue.createApp({
  2.     data() {
  3.       return {
  4.         listArry: ['dell', 'lee', 'teacher'],
  5.         listObject: {
  6.           firstName: 'dell',
  7.           lastName: 'lell',
  8.           job: 'teacher',
  9.         }
  10.       }
  11.     },
  12.     methods: {
  13.       handleAddBtnClick() {
  14.         //1、使用数组的变更函数 push,pop,shift(从开头去除),unshift(从开头添加)，splice, sort, reverse
  15.         // this.listArry.push('hello')
  16.         // this.listArry.pop();
  17.         // this.listArry.shift('hello')
  18.         // this.listArry.unshift('hello')
  19.         //2、直接替换数组
  20.         // this.listArry=['bye','world']
  21.         // this.listArry=['bye'].concat(['world'])
  22.         // this.listArry = ['bye', 'world'].filter(item => item === 'bye');
  23.         // 3、直接更新数组的内容
  24.         // this.listArry[1]='word'
  26.         // 直接添加对象的内容，也可以自动的展示出来
  27.         this.listObject.age = 100;
  28.         this.listObject.sex = 'male';
  29.       }
  30.     },
  31.     template: `
  32.       <div>
  33.         <template
  34.           v-for="(value, key, index) in listObject"
  35.           :key="index"
  36.         >
  37.           <div v-if="key !== 'lastName'">
  38.             {{value}} -- {{key}}
  39.           </div>
  40.         </template>
  41.       <div v-for="item in 10">{{item}}</div>
  42.       <button @click="handleAddBtnClick">新增</button>
  43.       </div>
  44.     `
  45.   });
  47.   const vm = app.mount('#root');