vue.js基础学习（条件渲染与列表渲染）

基础入门：vue.js 条件渲染与列表渲染

1、条件渲染

• v-if：只要后面为false，对应的元素和子元素都不会被渲染，控制dom元素的创建和销毁，一次性的；

• v-show:只是简单的切换元素的display css property，带有v-show的元素始终会被渲染保留在dom中，用于频繁切换状态，节约性能；

源代码：

<script>
import { resolveDirective } from 'vue';

  export default{
    data(){
      return{
        age:16,
        sex:'woman',
        isShow:true
            }
        }
      }
    methods:{
      
    }

</script>

<template>
  <!-- v-if：只要后面为false，对应的元素和子元素都不会被渲染，控制dom元素的创建和销毁，一次性的 -->
  <p v-if='age>18'>我是成年人</p>
  <p v-else-if="age==18">我今年刚好18岁</p>
  <p v-else>我是小朋友</p>
  <template v-if="age>=18">
    <p>你所经历的所有挫折、失败，甚至那些看似毫无意义消磨时间的事情，都将成为你最宝贵的财富。</p>
    <p>你所经历的所有挫折、失败，甚至那些看似毫无意义消磨时间的事情，都将成为你最宝贵的财富。</p>
    <p>你所经历的所有挫折、失败，甚至那些看似毫无意义消磨时间的事情，都将成为你最宝贵的财富。</p>
  </template>
  <!-- v-show:只是简单的切换元素的display css property，带有v-show的元素始终会被渲染保留在dom中，用于频繁切换状态 -->
  <p v-show="sex=='man'">男生</p>
  <p v-show="sex=='woman'">女生</p>
  <h1 v-if="isShow">标题1</h1>
  <h1 v-show="!isShow">标题2</h1>
  <button @click="isShow=!isShow">isShow取反</button>
</template>

<style>
 
</style>

源代码运行情况：

2、列表渲染 

• v-for：使用数组，item代表数组元素，index表示数组元素的下标，<li v-for="item in preson" :key="item">{{item}}</li>；

• v-for：使用对象，item表示键值，key表示键名，<li v-for="item in presonobj" :key="item">{{item}}</li>；

• key：唯一标识，<li v-for="item in preson" :key="item"><input type="checkbox" name="" id="">{{item}}</li>；

源代码： 

<script>
import { resolveDirective } from 'vue';

  export default{
    data(){
      return{
        preson:['张三','李四','王五'],
        presonobj:{name:'张三',age:18,sex:'男'}
            }
        },
        methods:{
          addpreson:function(){
            this.preson.unshift('赵六')
          }
        }
      }

</script>

<template>
<!-- v-for：使用数组，item代表数组元素，index表示数组元素的下标 -->
  <ul>
    <li v-for="item in preson" :key="item">{{item}}</li>
  </ul>
  <ul>
    <li v-for="(item,index) in preson" :key="index">{{item}}--{{index}}</li>
  </ul>
  <ul>
    <li v-for="(item,index) of preson" :key="index">{{item}}--{{index}}</li>
  </ul>
  <!-- v-for：使用对象，item表示键值，key表示键名 -->
  <ul>
    <li v-for="item in presonobj" :key="item">{{item}}</li>
  </ul>
  <ul>
    <li v-for="(item,key,index) in presonobj" :key="index">{{item}}--{{key}}--{{index}}</li>
  </ul>
  <!-- key：唯一标识 -->
  <ul>
    <li v-for="item in preson" :key="item"><input type="checkbox" name="" id="">{{item}}</li>
  </ul>
  <button @click="addpreson">增加</button>
</template>

<style>
 
</style>

源代码运行情况：