Vue中样式绑定技巧-优快云博客

本文链接：https://blog.youkuaiyun.com/wulianlang6162/article/details/98519785

使用class样式

数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>在vue中使用样式</title>
    <script src="js/vue.js"></script>
</head>
<style>
    .red{
        color: red;
    }
    .thin{
        font-weight: 200;

    }
    .italic{
        //倾斜
        font-style: italic;

    }
    .active{

        letter-spacing: 0.5em ;
    }
</style>
<body>
<div id="app">
    <p>{{msg}}</p>
<!-- //方法一   -->
    <h1 class="red thin active">在vue中使用样式</h1>
    <!--方法2使用数组-->
    <h1 :class=['red','thin','active']>在vue中使用数组定义样式</h1>
    <!--方法3使用数组 里面用三元表达式和变量-->
    <h1 :class=['red','thin',flag?'active':'']>方法3使用数组 里面用三元表达式和变量</h1>
    <!--方法3使用数组 里面用对象来代替三元表达式-->
   <h1 :class=['red','thin',{'active':flag}]>方法3使用数组 里面用三元表达式和变量</h1>
    <!--在为class使用v-bind绑定对象的时候，对象的属性是类名，偶遇对象的属性可带引号，也可以不带引号，所以这里我没有引号-->
    <h1 :class="object">在为class使用v-bind绑定对象的时候，对象的属性是类名，偶遇对象的属性可带引号，也可以不带引号</h1>
</div>

<script type="text/javascript">
    //2.创建一个实例
    //这里：new出来的这个就是我们mvvm中的vm调度者
    new Vue({
        el:'#app',//表示我们new的这个vue实例要控制的区域
        data: {//data就是mvvm中的m
            //data属性中，存放的是el中要用到的数据
            msg:'在vue中使用样式',
            flag:false,
            object:{ red: true, thin: true, active:false }
        }
    });
</script>
</body>
</html>

使用内联样式

直接在元素上通过 :style 的形式，书写样式对象

  <h :style="{color:'red','font-weight':200}">{{mytitle}}2</h>

将样式对象，定义到data中，并直接引用到：stytle中

 <h :style="styleobj">{{mytitle}}2</h>
 ----------------------------------------------------
 data: {
                mytitle:'使用样式',
                styleobj:{color:'red','font-weight':200}
            },

在：style中通过数组，引用多个data上的样式对象

<h :style="[styleobj,styleobj2]">{{mytitle}}2</h>
-----------------------------------------------------------
  new Vue(
        {
            el: '#app',
            data: {
                mytitle:'使用样式',
                styleobj:{color:'red','font-weight':200},
                styleobj2:{'font-style':'italic'}
            },
            methods:{//这个mehtods属性就是定义了当前vue实例所有可以用的方法

            }
        }
    )

实例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用样式</title>
    <script src="js/vue.js"></script>
    <div id="app">
        <!--对象就是无序键值对的集合-->
        <!---->
    <h :style="[styleobj,styleobj2]">{{mytitle}}2</h>

    </div>
</head>
<body>
<script>
    new Vue(
        {
            el: '#app',
            data: {
                mytitle:'使用样式',
                styleobj:{color:'red','font-weight':200},
                styleobj2:{'font-style':'italic'}
            },
            methods:{//这个mehtods属性就是定义了当前vue实例所有可以用的方法

            }
        }
    )

</script>
</body>
</html>