vue 指令 v-bind class绑定综合方法

灰太狼 2023-01-07 08:45 88阅读 0赞

<head>
      <meta charset="UTF-8">
      <title>Document</title>
      <style type="text/css"> .active { border: 1px solid red; width: 100px; height: 100px; } .error { background-color: orange; } .test { color: blue; } .base { font-size: 28px; } </style>
    </head>
    <body>
      <div id="app">
        <div v-bind:class='[activeClass, errorClass, {test: isTest}]'>测试样式</div>
        <div v-bind:class='arrClasses'></div>
        <div v-bind:class='objClasses'></div>
        <div class="base" v-bind:class='objClasses'></div>
    
        <button v-on:click='handle'>切换</button>
      </div>
      <script type="text/javascript" src="js/vue.js"></script>
      <script type="text/javascript"> /* 样式绑定相关语法细节： 1、对象绑定和数组绑定可以结合使用 2、class绑定的值可以简化操作 3、默认的class会保留 */ var vm = new Vue({ el: '#app', data: { activeClass: 'active', errorClass: 'error', isTest: true, arrClasses: ['active','error'], objClasses: { active: true, error: true } }, methods: { handle: function(){ // this.isTest = false; this.objClasses.error = false; } } }); </script>
    </body>

发表评论取消回复

表情：

评论列表（有 0 条评论，88人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue 随机绑定class

在 Vue 中，你可以使用动态绑定 class 的语法来为元素随机绑定 class。首先，你需要定义一个变量来存储你想要绑定的 class 的名称。然后，你可以使用这个变量

比眉伴天荒/ 2024年03月25日 11:32/ 0 赞/ 201 阅读

相关 vue-绑定class样式

1、数组语法我们可以借助于v-bind指令来实现： HTML： <div id="app"> <div v-bind:class="active

喜欢ヅ旅行/ 2023年07月23日 09:56/ 0 赞/ 149 阅读

相关 Vue 动态绑定 class 的方法

> 本文实例讲述了vue动态绑定class的几种常用方式。分享给大家供大家参考，具体如下： \1 字符串绑定 :class=" 'className' "

深藏阁楼爱情的钟/ 2023年06月23日 06:55/ 0 赞/ 124 阅读

相关 vue 指令 v-bind class绑定综合方法

<head> <meta charset="UTF-8"> <title>Document</title> <style type=

灰太狼/ 2023年01月07日 08:45/ 0 赞/ 89 阅读

相关 vue 指令 v-bind class绑定数组方法`[]`

<head> <meta charset="UTF-8"> <title>Document</title> <style type=

分手后的思念是犯贱/ 2023年01月07日 08:45/ 0 赞/ 120 阅读

相关 vue 指令 v-bind class绑定对象方法`{}`

<head> <meta charset="UTF-8"> <title>Document</title> <style type=

朴灿烈づ我的快乐病毒、/ 2023年01月07日 08:44/ 0 赞/ 104 阅读

相关 Vue Class绑定

> 对象语法绑定 HTML Class <div class="static"

分手后的思念是犯贱/ 2022年12月05日 10:20/ 0 赞/ 206 阅读

相关 Vue绑定class

Vue绑定时可以通过传入一个对象，来动态的切换class: <div v-bind:class="\{active:isActive\}" ></div> 这行代码的意思就

缺乏、安全感/ 2022年06月06日 06:43/ 0 赞/ 356 阅读

相关 Vue绑定属性绑定Class 绑定style

vue是如何绑定属性和class以及style的下面我将会插入一段代码，本人在代码里做了相当详细的注释。 <template> <!-- v

待我称王封你为后i/ 2022年03月25日 09:36/ 0 赞/ 570 阅读

相关 vue动态绑定class

<li v-for="(item,index) in processOptions" class="process-list-item" :class="{ ' is-

╰+哭是因爲堅強的太久メ/ 2021年07月25日 20:53/ 0 赞/ 608 阅读