2020-11-09

  • Post author:
  • Post category:其他




vue常用指令

 v-bind:
    v-on:
    v-text:  跟插值表达式功能类似,可以向指定的元素中加入数据   
    v-html:  可以将带有标签的字符串,渲染到指定的元素中
    v-show:  指令给一个bool类型,如果bool类型为true,显示,否则false就是不显示
    v-if:    指令给一个bool类型,如果bool类型为true,显示,否则false就是不显示

    v-if 和 v-show的区别:
        条件为真是,都可以显示dom元素,当条件为假时,v-if是删除dom节点,v-show是隐藏dom节点
        如果在页面频繁使用时,使用v-show,如果页面使用只有初始化一次是否显示时,使用v-if
        示例:    
        <template v-show="isShow">
            
        </template>
        他是透明标签,不会渲染任何的标签,然后只有v-if可以控制他的添加或删除,v-show不好使

    v-for:
        循环数组:  v-for="(item,index) in arr"   item表示的是数组中的每一项,index表示的是每一项的索引
        循环对象:  v-for="(value,key) in obj"    value表示对象中的属性值,key表示对象中的属性
        循环数字:  v-for="(n,i) in num"          n表示从1到指定的数字,i表示从0到多
        循环字符串:v-for="(s,i) in str"          s表示循环字符串中的每一个字符,i表示字符的索引



实现单选效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
    <style>
        /* 选种样式 */
        .active{
            color: red; 

        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 如果p元素的下表和active相同就添加选种样式 -->
         <p @click="checked(k)" :class="{'active':k==active}" v-for="(i,k) in 5">{{i}}</p>
    </div>
   
    
</body>
<script>

   new Vue({
       el:"#app",
       data:{
        active:0 //被选中的元素的下标
       },
       methods:{
            
            checked(k){  //谁点击active就等于谁的下标
               
               this.active=k
                 
            }

       }

   })

</script>
</html>



实现多选效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
    <style>
        /* 选种样式 */
        .active{
            color: red; 

        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 如果该条数据的ischecked属性为true就添加选中样式 -->
         <p @click="checked(k)" :class="{'active':i.ischecked}" v-for="(i,k) in arr">{{i.title}}</p>
    </div>
   
    
</body>
<script>

   new Vue({
       el:"#app",
       data:{
        //    渲染到页面的数据
        arr:[{title:"1",ischecked:false},{title:"1",ischecked:false},{title:"1",ischecked:false},{title:"1",ischecked:false},]
       },
       methods:{
            
            checked(k){  //哪个元素点击该元素对应数据.ischecked就为true
               
               this.arr[k].ischecked=true
                 
            }

       }

   })

</script>
</html>



版权声明:本文为weixin_47212088原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。