Vue添加class类名

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box {
            border: 10px solid seagreen
        }
        
        .box_size {
            height: 100px;
            width: 100px;
        }
        
        .box_color {
            background: steelblue
        }
    </style>
</head>
<div id="app">
    <h3>普通形式</h3>
    <div class="box box_size box_color">123</div>
    <h3>v-bind的形式</h3>
    <div :class="box">123</div>
    <div :class=" 'box box_size box_color' ">123</div>

    <div :class="{[box]:true,[size]:true,[color]:true}">456</div>


    <div :class="[size,color,box]">789</div>

</div>

<body>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                msg: '我爱你',
                box: 'box',
                class_flag: true,
                size: 'box_size',
                color: 'box_color'
            }
        })
    </script>
</body>

</html>
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue