vue之class 与 style 绑定

最新推荐文章于 2024-08-19 08:00:00 发布

Step_Top

最新推荐文章于 2024-08-19 08:00:00 发布

阅读量272

点赞数

分类专栏： Vue.js 文章标签： vue Class 与 Style 绑定

本文链接：https://blog.csdn.net/qq_41333582/article/details/82597455

版权

Vue.js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

Class 与 Style 绑定

使用 v-bind 指令来设置元素的 class 属性或者sytle属性，它们的属性值可以是表达式，vue.js在这一块做了增强，表达式结果除了是字符串之外，还可以是对象或者数组。

Class绑定

用法一: 可以用一个布尔值控制类名加载

控制类名的加载与否

<style>
    .basic {
        color:red;
    }
    .box {
        background-color:red;
    }
    .divbox {
        width:100px;
        height:100px;
    }
</style>


<div id="app">
    <div class="box divbox"></div>
    <div class="basic" v-bind:class="{box:isActive, divbox:isHave}"></div>
</div>


<script>
    var vm = new Vue({
        el:'#app',
        // data属性值如下：
        data:{
            // 控制类名是否加载的变量
             isActive: true,
            isHave:   false
        }
    })
</script>

最终渲染的效果：

<div class="static box"></div>

用法二: 可以给 class 传一个对象

对象内部控制类名的加载与否

<style>
    .basic {
        color:red;
    }
    .box {
        background-color:red;
    }
    .divbox {
        width:100px;
        height:100px;
    }
</style>

<div id="app">
    <div class="basic" v-bind:class="{box:isActive, divbox:isHave}"></div>
    <div class="basic" v-bind:class="objName"></div>
</div>

<script>
    var vm = new Vue({
        el:'#app',
        // data属性值如下：
        data:{
            objName:{
                // 控制类名是否加载的变量
                box:false, 
                divbox:true
            }
        }
    })
</script>

最终渲染的效果：

<div class="static active"></div>

例如:

<head>
    <script src="./vue.js"></script>
    <script>
        window.onload = function (){
            var vm = new Vue({
                el:'#app',
                data:{
                    isActive:false,
                    objName:{
                        active:true
                    }
                },
                methods: {
                    // 添加点击事件
                    btnBeclicked:function(){
                        // 属性值取反
                        this.isActive = !this.isActive
                        this.objName.isHave = !this.objName.isHave
                    }
                }
            })
        }
    </script>
    <style>
        .active {
            background-color: pink;
        }
    </style>
</head>
<body>
    <div id="app">
        <button @click="btnBeclicked">按钮控制样式切换</button>
        <div v-bind:class="{active:isActive}">这是第一个div标签</div>
        <div v-bind:class="objName">这是第二个div标签</div>
    </div>
</body>

用法三: 可以给 class 传一个数组

数组内部控制类名的加载与否

<style>
    .basic {
        color:red;
    }
    .box {
        background-color:red;
    }
    .divbox {
        width:100px;
        height:100px;
    }
</style>

<div id="app">
    <div class="basic" v-bind:class="[firstName, secondName]"></div>
</div>

<script>
    var vm = new Vue({
        el:'#app',
        // data属性值如下：
        data:{
            firstName:'box',
            secondName:'divbox'
        }
    })
</script>

最终渲染为：

<div class="basic box divbox"></div>

用法四: 可以给 class 传一个三元表达式

用三元表达式来控制类名是否加载

需要注意: 三元表达式需要写在数组中

<style>
    .basic {
        color:red;
    }
    .box {
        background-color:red;
    }
    .divbox {
        width:100px;
        height:100px;
    }
</style>

<div id="app">
    <div class="basic" v-bind:class="[isActive ? box : '', divbox]"></div>
</div>

<script>
    var vm = new Vue({
        el:'#app',
        // data属性值如下：
        data:{
            isActive: true
        }
    })
</script>

最终渲染为：

<div class="basic box divbox"></div>

不过，当有多个条件class时这样写有些繁琐。所以在数组语法中也可以使用对象语法：

这样的使用方法了解即可, 一般我们不会使用

<div v-bind:class="[{ active: isActive }, errorClass]"></div>

总结:

正常使用class: class="box divbox"
用变量控制类名的加载与否: :class="{box: true/false, divbox}"
上面的式子我们也可以把对象赋一个名字, 调用名字: :class="objName",其中: objName={box: true/false}
可以使用数组来包裹类名: :class=[firstName],其中: firstName="divbox"
也可以使用三元表达式,但是三元表达式需要放在数组中.

style绑定

用法一: 可以使用一个布尔值来决定样式是否作用到标签上

<div id="app">
    <!--正常的用法:-->
    <div style="color:red;font-size:30px;">
    <!--vue中的使用方法:-->
    <div v-bind:style="{color: colorName, fontSize: fontName + 'px'}"></div>
</div>

<script>
    var vm = new Vue({
        el:'#app',
        // data属性值如下：
        data:{
            colorName: 'red',
             fontName: 30
        }
    })
</script>

用法二: 也可以给 style 传一个对象

对象中

<div id="app">
    <!--正常的用法:-->
    <div style="color:red;font-size:30px;">
    <!--vue中的使用方法:-->
    <div v-bind:style="objName"></div>
</div>

<script>
    var vm = new Vue({
        el:'#app',
        // data属性值如下：
        data:{
            objName:{
                color: 'red',
                fontSize: '30px'  
            }
        }
    })
</script>

用法三: style 上可以添加数组, 通过数组控制样式的加载

<div id="app">
    <!--正常的用法:-->
    <div style="color:red;font-size:30px;">
    <!--vue中的使用方法:-->
    <div v-bind:style="[style01, style02]"></div>
</div>

<script>
    var vm = new Vue({
        el:'#app',
        // data属性值如下：
        data:{
            style01:{
                color:'red',
                fontSize:'30px'
            },
            style02:{
                background:'pink'
            }
        }
    })
</script>

总结: style可以这样使用:

<body>
    <div id="app">
        <p :style="{'color':colorName,'fontSize':fontSizeName}">设置style属性的p标签1</p>
        <p :style="sty01">设置style属性的p标签2</p>
        <p :style="[sty01,sty02]">设置style属性的p标签3</p>
    </div>

    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                colorName:'red',
                fontSizeName:'30px',
                sty01:{
                    color:'blue',
                    fontSize:'40px'
                },
                sty02:{
                    background:'gold'
                }
            }
        })
    </script>
</body>

总结:

vue 这个框架会使我们使用非常方便, 所以它推出了很多的指令, 这些指令能够帮助我们快速方便的书写代码
v-if 能够决定元素是否显隐, 如果隐藏, 则不会在 DOM 树中存在, 即一旦使用 v-if 隐藏某个元素,其实是销毁当前元素.
v-else 一般和 v-if 配合使用, 不能够单独使用, 这一点请大家牢记
v-show 和 v-if 的功能类似, 都能够控制元素的显隐, 但是它是通过样式: display: none; 来控制元素的, 而不像 v-if 是通过销毁与创建来控制.
v-show 和 v-if 使用哪个的问题: 随意, 想使用哪个就使用哪个, 这个没有强制的要求, 只要能够达到目的就可以. 如果有的选,还是使用 v-show 好点, 不会频繁的操作 DOM 树.