vue的v-if，v-show,v-for，v-on用法

 vue的v-if，v-show,v-for，v-on用法

 

v-show

<!-- 隐藏元素  v-show  作用跟display一样 切换频繁可以用-->
        <!-- <h1 v-show="flase">欢迎来到{{name}}</h1> -->
        <!-- 只要返回结果为布尔值就行 -->
        <!-- <h1 v-show="1===3">欢迎来到{{name}}</h1> -->

v-if

 <!-- v-if作用是删除节点，彻底消失，连块都不见了 切换不频繁可以用-->
        <!-- <h1 v-if="1===3">欢迎来到{{name}}</h1> -->

v-for

<!-- <li v-for="(p,index) of persons" :key="index">
                    index是这个v-for方法本身就有的形参，可以省略，他就一索引值，需要的话可以再后面加
                个属性：a=“index”去接收，也可以用key接收，但是在vue里key被征用了，它可以接收，但不会显示
            在页面上 -->
                <li v-for="p of persons" :key="p.id">
                    {{p.name}}-{{p.age}}
                </li>
 
     data:{
                persons:[
                    {id:001,name:'王哥',age:23},
                    {id:002,name:'欧儿子',age:25},
                    {id:003,name:'谭儿子',age:23}
            ],

v-on

     

   <button v-on:click="showInof1">点我触发事件1（不传参）</button>
 <!-- 简写模式
        <button @click="showInof">点我触发事件（传参）</button> -->
 
        <button @click="showInof2($event,66)">点我触发事件2（传参）</button>