vue 条件渲染、列表循环渲染、事件绑定 初探第三天

• 条件渲染

<script>
   const app = Vue.createApp({

    data(){
        return {
            show:true,
            conditionOne: false,
            conditionTwo: true,
        }
    },

   template:`
   <div v-if="show">  hello word  </div>

   <div v-if="conditionOne">  if  </div>
   <div v-else-if="conditionTwo"> else if  </div>
   <div v-else>  else  </div>
   `
   });

    // vm 代表的就是 vue 应用的根组件
   const vm = app.mount('#root');
    
</script>

2. 列表循环渲染

<script>
   const app = Vue.createApp({

    data(){
        return {
            listArray:['dell', 'lee', 'teacher'],
        }
    },

   template:`

   <div> 
        <div v-for="(item, index) in listArray" :key="item">{{item}} -- {{index}}</div>
    </div>

   `

   });


    // vm 代表的就是 vue 应用的根组件
   const vm = app.mount('#root');
    
</script>

3. 事件绑定