VUE初学 第一讲 v-for

VUE初学 第一讲 v-for

• 1、创建展示模拟数据源

<script>
export default {
  data() {
    return {
      flag: true,
      list:[1,2,3,4,5,6],
      listtwo:[
        {id:1,name:"1111"},
        {id:2,name:"中国"}],
      user:{
        id:1,
        name:"tuolasi",
        sex:"男"
      }
    };
  },
  methods: {
   
  }
};
</script>

• 2、v-if特点:每次都会重新创建和删除dom元素 。
  v-show特点: 每次不会创建和删除,但改变display的属性
• 3、普通循环

<p v-for="(item,i) in list"    :key="item"> 索引值= {{i}} ---数值---{{item}}</p>

• 4、json对象循环

<p v-for="(val,key,index) in user" :key="val">索引值={{i}} --姓名=={{val}} --坐标--{{index}}</p>

• 5、json对象循环（列表嵌套）

<p v-for="(user,i) in listtwo" :key="user">索引值= {{i}} ---数值---{{user.id}}--{{user.name}}</p>