vue 样式绑定

爱学习的啊强

已于 2022-07-26 22:25:32 修改

阅读量309

点赞数 1

文章标签： vue.js javascript 前端

于 2022-07-26 22:10:33 首次发布

本文链接：https://blog.csdn.net/qq_52474756/article/details/126004203

版权

常规样式绑定

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue </title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<style>

//样式类
.active {
   width: 100px;
   height: 100px;
   background: green;
}
</style>
</head>
<body>
<div id="app">

//'active 类名 isActive 控制是否显示
<div v-bind:class="{ 'active': isActive }"></div>
</div>

isActive: true
}
})
</script>
</body>
</html>

组件的样式绑定

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>样式绑定</title>
    <script src="../vue.js"></script>
    <style>
        .active {
            width: 300px;
            height: 300px;
            color: aquamarine;
            background-color: beige;
        }
    </style>
</head>

<body>
    <div id="app">
        <yangshi></yangshi>
        <!-- 写在组件里也可以 -->
        <!-- <yangshi v-bind:class="{'active':'isActiv'}"></yangshi> -->
    </div>
    <script>
        // 组件
        Vue.component('yangshi', {
            data() {
                return {
                    // 写在vue 实例化对象中也可以
                    isActiv: true
                }
            },
            template: `<div v-bind:class="{'active':'isActiv'}">组件样式绑定</div>`
        })

        var vm = new Vue({
            el: '#app',
            data: {
                // isActiv: true
            },
        })
    </script>
</body>

</html>

可以绑定多个类

.active {

width: 300px;

height: 300px;

}

.nav {

color: aquamarine;

background-color: beige;

}

// 组件

Vue.component('yangshi', {

data() {

return {

// 写在vue 实例化对象中也可以

isActiv: true,

isNav: true

}

template: `<div v-bind:class="{'active':'isActiv','nav':'isNav'}">组件样式绑定</div>`

})

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue </title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<style>
.active {
    width: 100px;
    height: 100px;
    background: green;
}
.text-danger {
    background: red;
}
</style>
</head>
<body>
<div id="app">

//可以是一个对象
  <div v-bind:class="classObject"></div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    classObject: {
      active: true,
      'text-danger': true
    }
  }
})
</script>
</body>
</html