vue 绑定 添加class 属性 4种方法 添加style 3中方法 v-bind

此文转载自https://www.cnblogs.com/wwlong/p/11283053.html

2023年10月16日晚更新

2023年1月5日更新
发现了个更好的动态设置class样式的方法
如·下图
希望对循环出来的数组，根据某个属性，动态设置样式

<span v-for="(item,index) in week" :key="index" :class="{'top_style':item.is_active==0,'top_active':item.is_active==1}">

一、添加class

<style>
    .red{color: skyblue;}
    .thin{font-weight: 200;}
    .italic{font-style: italic;}
    .active{letter-spacing: 0.5em}
</style>

1.第一种使用方式，直接传递一个数组，注意的 class需要使用 v-bind 做数据绑定

eg:
<h1 :class="['italic','red'">H1标签！！！</h1>

2.在数组中使用三元表达式

eg:
<h1 :class="['italic','red',flag?'active':'']">H1标签！！！</h1>

3.在数组中使用 对象来代替三元表达式，提高代码的可读性

<h1 :class="['italic','red',{'active':flag}]">H1标签！！！</h1>

4.在为class使用v-bind 绑定 对象的时候，对象的属性是类名，由于对象的额属性可带引号，也可以不带引号；属性的值是一个标识符

(1).<h1 :class="{'red':true,thin:true,italic:true,active:true}">H1标签！！！</h1>
(2).<h1 :class="classObj">H1标签！！！</h1>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            msg:'点击事件',
            flag:false,
            classObj:{red:true,thin:true,italic:true,active:true}
        },
        methods:{
           
        }
    });
</script>

二、添加style
1.直接在元素上通过:style的形式，书写样式对象

<h1 :style="{color:'red','font-size':'40px'}">h1标签</h1>

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

<h1 :style="styleobj">h1标签</h1>

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

<h1 :style="[styleobj,styleobj2]">h1标签</h1>

<script>
    //创建Vue实例
    var vm = new Vue({
        el:'#app',
        data:{
            styleobj:{color:'red','font-weight':200},
            styleobj2:{'font-style':'italic'}
        },
        methods:{}
    })
</script>