Vue系列四：class与style绑定

怼烎@ 2022-01-30 06:13 233阅读 0赞

1.  理解  
    在应用界面中, 某个(些)元素的样式是变化的  
    class/style绑定就是专门用来实现动态样式效果的技术
2.  class绑定: :class=‘xxx’  
    xxx是字符串  
    xxx是对象  
    xxx是数组
3.  style绑定  
    :style="\{ color: activeColor, fontSize: fontSize + ‘px’ \}"  
    其中activeColor和fontSize是data属性

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>class与style绑定</title>
      <style>
        .classA {
          color: red;
        }
        .classB {
          background: blue;
        }
        .classC {
          font-size: 20px;
        }
      </style>
    </head>
    <body>
    <div id="demo">
      <h2>1. class绑定: :class='xxx'</h2>
      <p :class="myClass">xxx是字符串</p>
      <p :class="{classA: hasClassA, classB: hasClassB}">xxx是对象</p>
      <p :class="['classA', 'classB']">xxx是数组</p>
    
      <h2>2. style绑定</h2>
      <p :style="{color:activeColor, fontSize}">:style="{ color: activeColor, fontSize: fontSize + 'px' }"</p>
    
      <button @click="update">更新</button>
    
    </div>
    
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript">
      new Vue({
        el: '#demo',
        data: {
          myClass: 'classA',
          hasClassA: true,
          hasClassB: false,
          activeColor: 'red',
          fontSize: '20px'
        },
    
        methods: {
          update () {
            this.myClass = 'classB'
            this.hasClassA = !this.hasClassA
            this.hasClassB = !this.hasClassB
            this.activeColor = 'yellow'
            this.fontSize = '30px'
          }
        }
      })
    </script>
    </body>
    </html>

发表评论取消回复

表情：

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

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

相关阅读

相关 Vue Class 与 Style 绑定

简介 HTML 元素的 class 绑定和内联样式绑定是数据绑定的一个常见需求。由于字符串拼接麻烦且易错。因此，在用 v-bind 绑定 class 和 sty...

左手的ㄟ右手/ 2024年04月18日 19:16/ 0 赞/ 93 阅读

相关 Vue动态绑定Class 与 Style

Class 可以通过对象语法和数组语法进行动态绑定 <div v-bind:class="{ active: isActive, 'text-danger': has

悠悠/ 2022年05月21日 01:26/ 0 赞/ 290 阅读

相关 Vue class和style绑定

关于vue中class和style的绑定，我们在本篇主要是为大家说明一下该怎么使用v-bind来进行处理。首先我们看下class的几种绑定方式： 1.对象语法通过v

水深无声/ 2022年05月20日 09:38/ 0 赞/ 301 阅读

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

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

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

相关 Vue系列四：class与style绑定

1. 理解在应用界面中, 某个(些)元素的样式是变化的 class/style绑定就是专门用来实现动态样式效果的技术 2. class绑定: :c

怼烎@/ 2022年01月30日 06:13/ 0 赞/ 234 阅读

相关 vue Class 与 Style 绑定

绑定Class 对象语法》 <div class="test" v-bind:class="{ 'class-a': isA, 'class-b':

叁歲伎倆/ 2022年01月20日 09:07/ 0 赞/ 435 阅读

相关 Class与Style绑定

　　对于数据绑定，一个常见的需求是操作元素的class列表和它的内联样式。因为它们都是attribute，我们可以用v-bind处理它们：只需要计算出表达式最终的字符串。不过，

客官°小女子只卖身不卖艺/ 2022年01月12日 09:17/ 0 赞/ 375 阅读

相关 Class与Style绑定

Class与Style绑定概述 Class绑定对象语法数组语法用在组件上绑定内联样式对象

雨点打透心脏的1/2处/ 2021年10月20日 00:26/ 0 赞/ 464 阅读

相关 Vue的class与style绑定

本博客记录了小编在学习Vue过程中的体会与感悟，简单来说就是小编的学习笔记，学习地址主要为Vue的官网，官网地址为：[《Vue官方文档》][Vue]。相关学习笔

「爱情、让人受尽委屈。」/ 2021年09月20日 02:44/ 0 赞/ 393 阅读

相关 Vue——Class和Style绑定

Class 与 Style 绑定操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用 `v-bind` 处理它们：只需要通过

矫情吗；*/ 2021年09月14日 12:28/ 0 赞/ 498 阅读