Vue Class与Style绑定【五】

最新推荐文章于 2024-08-30 00:10:04 发布
最新推荐文章于 2024-08-30 00:10:04 发布
阅读量149 收藏
点赞数
分类专栏： Vue官方文档入门 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/FrequencyStar/article/details/107753117
版权

Class与Style绑定

操作元素的class列表和内联样式是数据绑定的一个常见需求，因为他们都是attribute，所以我们可以用v-bind来处理他们

绑定HTML Class

对象语法

通过v-bind:class,借助data或计算属性，来动态改变某个class是否存在

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
      .active,
      .active2,
      .active3 {
        border: 3px solid red;
        width: 100px;
        height: 100px;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <!-- <div v-bind:class="{'active': isactive}">我是DIV</div> -->
      <!-- <div v-bind:class="classObject">我是DIV</div> -->
      <div v-bind:class="classObject">我是DIV</div>
    </div>

    <script>
      let vm = new Vue({
        el: '#app',
        // data: function () {
        //   return {
        //     isactive: true
        //   }
        // }
        // data: {
        //   classObject: {
        //     active2: true,
        //     danger: true
        //   }
        // }
        data: function () {
          return {
            isactive: true
          }
        },
        computed: {
          classObject: function () {
            return {
              active3: this.isactive
            }
          }
        }
      })
    </script>
  </body>
</html>
数组语法

把一个数组传给v-bind:class,以应用一个class列表，进而借助这个class列表来动态修改class。

<div id="app">
      <div v-bind:class="[classOne,classTwo]">我是DIV</div>
    </div>

    <script>
      let vm = new Vue({
        el: '#app',
        data: function () {
          return {
            classOne: 'sty1',
            classTwo: 'sty2'
          }
        }
      })
    </script>

如果你也想根据条件切换列表中的 class，可以用三元表达式：

<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>

这样写将始终添加 errorClass，但是只有在 isActive 是 truthy时才添加 activeClass。

不过，当有多个条件 class 时这样写有些繁琐。所以在数组语法中也可以使用对象语法：

<div v-bind:class="[{ active: isActive }, errorClass]"></div>
用在组件上

自定义组件的初始模板上的class不会被覆盖，后续添加的class会增加

绑定内联样式

对象语法

类似于class的对象语法

直接绑定到一个样式对象通常更好，这会让模板更清晰：

<div v-bind:style="styleObject"></div>

data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

同样的，对象语法常常结合返回对象的计算属性使用。

数组语法

v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上：

<div v-bind:style="[baseStyles, overridingStyles]"></div>
自动添加前缀

当 v-bind:style 使用需要添加浏览器引擎前缀的 CSS property 时，如 transform，Vue.js 会自动侦测并添加相应的前缀。

多重值

从 2.3.0 起你可以为 style 绑定中的 property 提供一个包含多个值的数组，常用于提供多个带前缀的值，例如：

<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

这样写只会渲染数组中最后一个被浏览器支持的值。在本例中，如果浏览器支持不带浏览器前缀的 flexbox，那么就只会渲染 display: flex。

FrequencyStar
关注
专栏目录
Vue Class与Style绑定
极北
03-22 1886
①数据绑定一个常见需求是操作元素的class列表和它的内联样式，因为它们都是属性，我们可以用  v-bind 处理它们：只需要计算出啊表达式最终的字符串。不过，字符串拼接麻烦又易错。因此，在 v-bind 用于 class 和 style 时，Vue.js专门增强了它，表达式的结果类型除了字符串之外，还可以是对象或数组。 ②绑定HTML Class    对象语法：       我们可以传给
Vue Class 与 Style 绑定
彳亍
09-10 288
简介 HTML 元素的 class 绑定 和内联样式绑定是数据绑定的一个常见需求。 由于字符串拼接麻烦且易错。因此，在用 v-bind 绑定 class 和 style 时，Vue.js 做了专门的增强。表达式的结果的类型除了字符串之外，还可以是对象或数组。 绑定 Class 对象语法 可以传给 v-bind:class 一个对象，来动态地切换 class。 <div v-bi...
Class 与 Style 绑定
最新发布
2403_86835544的博客
08-30 984
用v-bind中的class，要注意的是直接写类名是作用不上的，需要加上单引号包裹起来。效果都是一样的，css样式中有些属性用 ("-") 分隔的，当时你想在v-bind:style中使用，可以使用驼峰或用单引号包裹。
Vue的学习（二）
weixin_65450681的博客
08-04 1068
数据发生变化会影响到视图 而v-bind绑定的数据视图变化 而数据不受影响 这就是单向的数据v-model 双向数据绑定 数据改变则视图发生变化 视图改变 则数据响应发生变化代码展示。
class和style绑定
weixin_44364634的博客
03-08 451
Vue - Class 与 Style 绑定 数据绑定一个常见需求是操作元素的class列表和它的内联样式，因为它们都是属性，我们可以用 v-bind处理它们：只需要计算出表达式最终的字符串。不过，字符串拼接麻烦又易错。因此，在 v-bind用于 class 和 style 时，Vue.js专门增强了它，表达式的结果类型除了字符串之外，还可以是对象或数组。 class的样式绑定 1. 字符串写法 <!-- 绑定class样式--字符串写法，适用于：样式的类名不确定，需要动态指定 -
Class与Style绑定
JustinNeil的博客
08-20 136
Class与Style绑定概述Class绑定对象语法数组语法用在组件上绑定内联样式对象语法数组语法自动添加前缀多重值 概述   操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专...
vue Class 与 Style 绑定
weixin_62141813的博客
05-17 441
Class 与 Style 绑定 操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。 绑定 HTML Class 语法格式: 使用方式：v-bind:class="expression" expr
vue计算属性+vue中class与style绑定(推荐)
10-15
#### Style绑定 1. **对象语法**：和`class`绑定类似，你可以提供一个对象，键是样式属性，值是样式值。 ```html <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"> ``` 2. **数组语法...
Vue的Class与Style绑定的方法
12-29
本文介绍了Vue的Class与Style绑定，分享给大家，具体如下： 绑定 HTML Class 对象语法 我们可以传给 v-bind:class 一个对象，以动态地切换 class： <style> .exp{ border: 1px solid #ccc; } .forExp{...
vue 中动态绑定class 和 style的方法代码详解
08-27
Vue 中动态绑定 Class 和 Style 的方法代码详解 Vue.js 作为一个响应的数据绑定系统，它允许我们在普通 HTML 模板中使用特殊的语法将 DOM “绑定”到底层数据。被绑定的 DOM 将与数据保持同步，每当数据有改动，...
class 与 style绑定
星星有所不知
02-18 106
class 与 style绑定一. class绑定1. 对象语法1.1 传给v-bind:class 一个对象，以动态的切换class1.2 绑定的数据对象不必内联定义在模板里1.3 绑定一个返回对象的计算属性2. 数组语法2.1 把一个数组传给 v-bind:class，以应用一个 class 列表2.2 在数组语法中也可以使用对象语法：二. style绑定1. 对象语法2. 数组语法 一. ...
class 与 style 绑定
A_a11100的博客
06-19 134
理解 1. 在应用界面中, 某个(些)元素的样式是变化的 2. class/style 绑定就是专门用来实现动态样式效果的技术 class 绑定 1. :class='xxx' 2. 表达式是字符串: 'classA' 3. 表达式是对象: {classA:isA, classB: isB} 4. 表达式是数组: ['classA', 'classB'] style 绑定 1. :style="{ color: activeColor, fontSize: fontSize + 'px' }" 2. 其中
class与style绑定
leva的博客
10-09 555
这个过程中，我们去记录思考的过程，便于日后复习，梳理自己的思路。学习之乐，独乐乐，不如众乐乐，把知识讲给更多的人听，何乐而不为呢?类名active依赖于数据isActive，当其为true时，div会拥有类名active的样式，为false时，则没有，所以“对象语法”存在1px的黑色边框。大多数情况下，直接写一长串的样式不便于阅读和维护，因此实际的开发中往往是写在data或者computed计算属性里。特别强调一点，动态绑定的 class 可以与普通的class共存，在浏览器中运行，显示效果。
class与 style绑定
qwsbcjendb的博客
07-24 347
class 与 style绑定
Vue中Class与Style绑定
qq_54334713的博客
06-20 245
vue官方文档解读
Vue class与style绑定
小柒的前端之旅
05-16 2312
前面的话 DOM元素经常会动态的绑定一些class类名或style样式。前面的文章已经初步的介绍了v-bind指令的基本用，它主要是动态的更新HTMl元素上的属性。这篇文章将介绍使用v-bind指令来绑定class和style的多种方法。 回顾 v-bind 回顾一下v-bind指令的用法： <div id="app"> <a v-bind:href="url"...
4-Class与Style绑定
weixin_41802265的博客
01-12 155
Class 与 Style 绑定 1、操作元素 class 列表和内联样式,因为都是属性,可以用 v-bind 处理通过表达式计算出字符串结果 2、v-bind 用于 class 和 style 时, 表达式结果的类型除了字符串之外，还可以是对象或数组 绑定 HTML Class 对象语法: 传给 v-bind:class 一个对象，动态地切换 class /* active 这个 class 存...
【Vue】class和style的绑定
南栀的博客
02-10 788
文章目录classstyle 在vue中可以使用[v-bind]指令绑定class与style class 可以传给 v-bind:class 一个对象，以动态地切换 class <style> .divColor{ width: 100px; height: 100px; background-color: red; } </style> <div id="root" v-bind:class="{divCo
Vue计算属性与class、style动态绑定实战解析
Vue.js还提供了类（Class）与样式（Style）的绑定功能，这让我们可以根据组件的状态动态地改变元素的样式。类的绑定有三种形式： 1. 字符串形式：使用一个字符串来表示类名，当表达式的值为真时，对应的类会被添加...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值