vue绑定多个样式的两种方式

一只小虾米~~

已于 2022-11-09 12:23:58 修改

阅读量1.5k

点赞数

文章标签： vue.js javascript 前端

于 2022-11-09 10:17:37 首次发布

本文链接：https://blog.csdn.net/weixin_43930256/article/details/127763908

版权

1、vue绑定需要在属性名前加上v-bind:,如：v-bind:class="",可简写成:class

2、vue样式对象绑定方式：v-bind:class = "{'vue的data状态值":boolean值, 'vue的data状态值':boolean值}”

<!-- 1.使用对象填充 -->
<div id="app">
<div id="box" :class="{'back':true,'circle':isCircle,'shadow':true}"></div>
</div>

3、vue样式数组绑定方式：v-bind:class="[条件?'vue的data状态值':'']"

<!-- 2.使用数组进行填充 -->
<div id="app"></div>
<div id="box" :class="[isBack?hasback:'',isCircle?hascicle:'',isShadow?hasshadow:'']"></div>
</div>

其中back、shadow、circle相关代码如下

<style>
        .back{background-color: blueviolet;}
        .circle{border-radius: 50%;}
        .shadow{box-shadow: 0px 0px 3px green;}
    </style>

let app = new Vue({
        el: "#app",//选中渲染区域，区域内可以使用下面的data
        data: {
            // 定义一个样式变量
            hasback:"back",
            hascicle:"circle",
            hasshadow:"shadow",
            // 定义一些布尔值来控制需要的样式
            isBack:true,
            isCircle:true,
            isShadow:true,
        }
    })