当前位置：首页 > article >正文

vue中绑定class样式和条件渲染

article 2024/9/23 21:28:39

绑定class样式

字符串写法：适用于：样式的类名不确定，需要动态指定
数组写法：适用于：要绑定的样式个数不确定，名字也不确定
绑定对象：适用于：要绑定的样式个数确定、名字确定、但动态决定决定用不用

<head>
    .normal{}
    .happy{}
    .sad{}
</head>
<body>
    //basic和class都是css修饰，而:class="mood"则是动态的随data中的mood改变而改变
    //字符串写法
    <div class="basic" :class="mood" @click="change">
        {{name}}
    </div>
    /*数组写法
    <div class="basic" :class="arr">
        {{name}}
    </div>
    */
     /*对象写法
    <div class="basic" :class="classObj">
        {{name}}
    </div>
    */
</body>
<script>
    new Vue({
        el: "#root",
        data: {
            name: '乡民',
            mood: 'normal',
            //数组字符串
           /*
            arr:['happy','normal','sad']
           */
           /*对象
            classObj:{
                happy: false,
                normal: false,
            }
           */
        },
        methods: {
            change: {
                //下列实现的是让mood随机显示'happy','normal','sad'这三种样式中的其中一个
                const arr = ['happy','normal','sad']
                //floor是让其取整，Math.random从0到3，取头不取尾
                const index = Math.floor(Math.random()*3)
                this.mood = arr[index]
            }
        }
    })
</script>

绑定style
第一种style绑定方法

<body>
    
    {fontSize：size + 'px'}的原型是font-size: 10px,直接用css格式vue不承认
    <div class="basic" :style="{fontSize：size + 'px'}">{{name}}</div>
</body>
<script>
    const vm = new Vue({
        el:'#root',
        data: {
           size: 40
        }
    })
</script>
第二种style绑定方法

<body>
    <div class="basic" :style="fontSize">{{name}}</div>
</body>
<script>
    const vm = new Vue({
        el:'#root',
        data: {
           fontSize: {
                fontSize: '40px'
           }
        }
    })
</script>

条件渲染

v-show做条件渲染
v-show="true"将页面的数据显示，v-show="false"只是用css将数据隐藏起来。也就是display: none;
v-if="true"也是将页面数据进行显示，v-if="false" 直接将页面的数据删除
v-if与v-else-if要挨着写中间不可添加任何标签,如< div>@</div

<body>
    <div id="root">
        <h2>当前的n值为：{{n}}</h2>
        <button :click="n++">点我n+1</button>
        /*使用v-show做条件渲染
        <h2 v-show="false">{{name}}</h2>
        <h2 v-show="true">{{name}}</h2>
        v-if做条件渲染
        <h2 v-if="false">{{name}}</h2>
        <h2 v-if="true">{{name}}</h2>
        //v-if和v-else-if，当v-if条件成立时，直接跳出v-else-if和v-else判断
        <div v-if="n == 1">{{苹果}}</div>
        /*<div>@</div>*/
        <div v-else-if="n == 2">{{栗子}}</div>
        <div v-else-if="n == 3">{{榴念}}</div>
        <div v-else>{{榴念}}</div>
        
        */
      
    </div>
</body>
<script>
    const vm = new Vue({
        el:'#root',
        data: {
          name: 'BOY' 
        }
    })
</script>

当重复出现相同的条件时可以用div标签统一实现
template标签相对于div标签，template不会影响DOM(页面)的格式

<body>
    <div  v-show="true">
         <div>{{栗子}}</div>
         <div>{{榴念}}</div>
         <div>{{梨子}}</div>
    </div>
    /*
    <template v-show="true">
         <div>{{栗子}}</div>
         <div>{{榴念}}</div>
         <div>{{梨子}}</div>
    </template>
    */
</body>
<script>
    const vm = new Vue({
        el:'#root',
        data: {
          name: 'BOY' 
        }
    })
</script>

查看全文

http://www.kler.cn/news/134642.html