Vue3手册译稿 - 基础 - Class和Style绑定

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

还有一个数据绑定就是控制元素的样式表或内联样式。因为它们都是属性，所以我们可以通过v-bind来处理：使用表达运算得到一个最终的字符串。但是字符串拼接是容易混乱和出错的。因为这个原因，Vue在使用v-bind绑定class和style时提供了增强方法。除了字符串，表达式同时也可能运算得到对象和数组。

绑定 HTML Classes

对象语法

我们可以给:class（v-bind:class的缩写）传递一个对象用来动态控制元素的样式：

<div :class="{ active: isActive }"></div>

这段意思是这个div的样式是否为active取决于布尔值isActive是否为真。你可以在元素上写上多个字段来使用元素有多个样式。另外:class可以与静态的class同时存在。看下面的模板：

<div
  class="static"
  :class="{ active: isActive, 'text-danger': hasError }"
></div>

使用下面的数据：

data() {
  return {
    isActive: true,
    hasError: false
  }
}

最终可能渲染为：

<div class="static active"></div>

isActive和hasError更新，元素的样式也随之更新。比如hasError变更为true，则最终渲染为：

<div class="static active text-danger"></div>

对象绑定不能是内联样式：

<div :class="classObject"></div>

data() {
  return {
    classObject: {
      active: true,
      'text-danger': false
    }
  }
}

渲染结果是一样的。我们同时也可以绑定一个返回对象的计算属性。这是比较常用且强大的方法：

<div :class="classObject"></div>

data() {
  return {
    isActive: true,
    error: null
  }
},
computed: {
  classObject() {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  }
}

数组语法

我们可以传递一个数组给:class，这样元素就可以有一个样式列表：

<div :class="[activeClass, errorClass]"></div>

data() {
  return {
    activeClass: 'active',
    errorClass: 'text-danger'
  }
}

渲染结果：

<div class="active text-danger"></div>

我们也可以根据条件控制样式是否包含在样式列表中，可以使用三元表达式：

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

errorClass始终存在，activeClass则取决于isActive是否为真。

但如果有多个条件判断的话就会显得有点繁琐，这就是为什么要使用数组语法：

<div :class="[{ active: isActive }, errorClass]"></div>

组件样式

这个章节假设你已经了解组件了，如果有问题请先跳过，学习组件后来来学习。

如果你将class属性应用到只有一个根元素的定制组件上，样式将被加到这个根元素上。根元素上的样式将不会被覆盖。

例如，你这样声明了一个组件：

const app = Vue.createApp({})
app.component('my-component', {
  template: `<p class="foo bar">Hi!</p>`
})

使用时又添加了一个结样式：

<div >
  <my-component class="baz boo"></my-component>
</div>

渲染结果如下：

<p class="foo bar baz boo">Hi</p>

样式绑定也是一样：

<my-component :class="{ active: isActive }"></my-component>

如果isActive为真，则渲染的HTML为：

<p class="foo bar active">Hi</p>

如果你的组件有多个根元素，你需要指定哪个根元素会使用该样式。你可以使用组件属性$attrs来完成(定义组件时用)：

<div >
  <my-component class="baz"></my-component>
</div>

const app = Vue.createApp({})
app.component('my-component', {
  template: `
    <p :class="$attrs.class">Hi!</p>
    <span>This is a child component</span>
  `
})

你可以通过非继承属性章节来了解更多组件样式。

绑定内联样式

对象语法

对象语法直接使用:style。除了是JavaScript对象以外，其他跟CSS都很像。样式名称，你可以使用驼峰命名或土耳其命名（短横线分隔）：

<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

data() {
  return {
    activeColor: 'red',
    fontSize: 30
  }
}

直接绑定样式对象有时候也不失为一个好的选择：

<div :style="styleObject"></div>

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

对象语法会结合返回对象的计算属性一起使用。

数组语法

:style的数组语法允许在一个元素上绑定多个样式。

<div :style="[baseStyles, overridingStyles]"></div>

自动前缀

如果你看到:style中一个样式需要浏览器前缀，例如：transform，Vue会自动检测当前浏览器并添加正确的前缀。

多值

你可以添加含有多样式（自动前缀）的数组到:style中，例如：

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

只会渲染最后一个当前浏览器支持的样式。在这个示例中，只会渲染display:flex输出非自动前缀版本流式布局到浏览器。

以上是 Vue3手册译稿 - 基础 - Class和Style绑定 的全部内容， 来源链接： utcz.com/z/380841.html

回到顶部