《图解Vue3.0》- 第8节 – 组件样式

时间:2021-6-11 作者:qvyue

组件的样式一般就是绑定到class或者绑定到style。这两种方式又分别可以使用对象语法或者数组语法。

  • class绑定:对象语法或者数组语法
  • style绑定: 对象语法或者数组语法
    接下来看两个例子就很容易了。

示例

我在测试对象语法
我在测试数组语法
我在测试style对象语法
我在测试style对象语法
import { defineComponent } from '@vue/composition-api' export default defineComponent({ data() { return { isRed: true, isStrong: true, red: 'red', strong: 'strong', color: 'blue', baseStyle: { color: 'yellow', fontSize: '14px' }, otherStyle: { backgroundColor: 'black' } } } }) div { margin: 15px; } .red { color:red; } .strong { font-weight: bolder; }
《图解Vue3.0》- 第8节 - 组件样式
示例.jpg

自动添加前缀

在 :style 中使用需要 (浏览器引擎前缀) vendor prefixes 的 CSS property 时,如 transform,Vue 将自动侦测并添加相应的前缀。

多重值

可以为 style 绑定中的 property 提供一个包含多个值的数组,常用于提供多个带前缀的值,例如:

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

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:qvyue@qq.com 进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。