5Vue样式绑定

通过数据改变样式

点击文字切换颜色

1.v-bind:class

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./vue.js"></script>
    <title>Vue中的样式绑定</title>
</head>
<style>
    .activated{
        color: blueviolet;
    }
</style>
<body>
    <!-- 这个元素有一个class样式，叫做 activated，是否使用activated取决于isActivated-->
    <div id="app"
        @click="handleDivClick"
        :class="{activated:isActivated}"
    >颜色</div>
    
</body>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            isActivated:false
        },
        methods:{
            handleDivClick:function(){
                this.isActivated=!this.isActivated
            }
        }
    })
</script>
</html>

点击后=>

2.v-bind:class数组形式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./vue.js"></script>
    <title>Vue中的样式绑定</title>
</head>
<style>
    .activated{
        color: red;
    }
</style>
<body>
    <!-- 这个元素有一个class样式，class可以和数组进行绑定，class的样式取决于className的内容，className可以在vue实例中进行赋值或改变-->
    <div id="app"
        @click="handleDivClick"
        :class="[className]"
    >颜色</div>
    
</body>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            isActivated:false,
            className:""
        },
        methods:{
            handleDivClick:function(){
                this.className=this.className==="activated"?"":"activated";
            }
        }
    })
</script>
</html>

数组中可以有多个值。

 

点击后=>

 

 

 

 

3.

 也可以对style进行绑定，如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./vue.js"></script>
    <title>Vue中的样式绑定</title>
</head>
<body>
    <div id="app"
        @click="handleDivClick"
        :style="styleObj"
    >颜色</div>
    
</body>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            styleObj:{
                color:'black'
            }
        },
        methods:{
            handleDivClick:function(){
                this.styleObj.color=this.styleObj.color==='black'?'blue':'black';
            }
        }
    })
</script>
</html>

点击后=》

 

 

4.style也可以使用数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./vue.js"></script>
    <title>Vue中的样式绑定</title>
</head>
<body>
    <div id="app"
        @click="handleDivClick"
        :style="[styleObj,{fontSize:'20px'}]"
    >颜色</div>
    
</body>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            styleObj:{
                color:'black'
            }
        },
        methods:{
            handleDivClick:function(){
                this.styleObj.color=this.styleObj.color==='black'?'blue':'black';
            }
        }
    })
</script>
</html>

 :style对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名

 样式绑定有两种方法，1.class ; 2.style。他们都可以通过数据来实现切换，同样也都可以通过数组进行绑定。

 

5.在数组中还可以进行条件切换

<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>

 

6.当 v-bind:style 使用需要添加浏览器引擎前缀的 CSS property 时，如 transform，Vue.js 会自动侦测并添加相应的前缀。

在组件中使用

当在一个自定义组件上使用 class property 时，这些 class 将被添加到该组件的根元素上面。这个元素上已经存在的 class 不会被覆盖。

例如，如果你声明了这个组件：

Vue.component('my-component', {
  template: '<p class="foo bar">Hi</p>'
})

然后在使用它的时候添加一些 class：

<my-component class="baz boo"></my-component>

HTML 将被渲染为：

<p class="foo bar baz boo">Hi</p>

对于带数据绑定 class 也同样适用：

<my-component v-bind:class="{ active: isActive }"></my-component>

当 isActive 为 truthy[1] 时，HTML 将被渲染成为：

<p class="foo bar active">Hi</p>

 

posted @ 2020-12-01 22:25  ellenxx  阅读(140)  评论(0)  编辑  收藏  举报