Vue.js如何绑定class和style（内联样式）

Chaz 发布于2019-08-20 19:05 / 2074人阅读

摘要：我们还可以绑定返回对象的计算属性。用在组件上输出这同样适用于绑定输出绑定内联样式对象语法的对象语法十分直观看着非常像，其实它是一个对象。

vue的class和style绑定 绑定html class 对象语法

我们可以传给 v-bind:class 一个对象，以动态地切换 class：

上面的语法表示 class active 的更新将取决于数据属性 isActive 是否为真值。
我们也可以在对象中传入更多的属性来自由的切换class的值，不仅如此，v-bind还可以与普通的class共存。

我们还可以绑定返回对象的计算属性。

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

数组语法

我们还可以把一个数组传给v-bind:class

data:{
    active:"a",
    error:"b"
}

我们也可以在数组上使用三元运算符

data:{
    active:"a",
    error:"b",
    isActive:true
}

当我们更改isActive为false时

此例始终添加 error ，但是只有在 isActive 是 true 时添加 active。

用在组件上

Vue.component("mycom",{
    template:"hi"
})

输出HTML

这同样适用于绑定HTML class

data:{
    isActive:true
}

输出HTML

绑定内联样式（v-bind:style） 对象语法

v-bind:style 的对象语法十分直观——看着非常像 CSS，其实它是一个 JavaScript 对象。 CSS 属性名可以用驼峰式 (camelCase) 或 (配合引号的) 短横分隔命名 (kebab-case)：

data: {
    activeColor: "red",
    fontSize: 30
}

这样我们感觉模板略显繁琐，所以我们可以直接绑定一个样式对象，这样模板会更加清晰

data:{
    styleobj:{
        color: "red",
        fontSize: "13px"
    }
}

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

数组语法

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

我像风一样自由

data:{
    baseStyles:{color:"red"},
    overridingStyles:{"font-size":"10px"}
}

自动添加前缀

因为各大浏览器的私有属性不同，我们有时需要在样式前添加前缀

例如-webkit-（谷歌）-ms-（微软）-moz-（火狐）-o-（opera）

但是我们在vue中就无需添加，因为vue会为我们自动添加前缀

多重值

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

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

GPU云服务器云服务器绑定Style样式 vue绑定内联样式 html的内联样式绑定class

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/85131.html

Vue.js-计算属性和class与style绑定

摘要：每一个计算属性都包含一个和一个。使用计算属性的原因在于它的依赖缓存。及与绑定的主要用法是动态更新元素上的属性。测试文字当的表达式过长或逻辑复杂时，还可以绑定一个计算属性。学习笔记：前端开发文档计算属性所有的计算属性都以函数的形式写在Vue实例中的computed选项内，最终返回计算后的结果。计算属性的用法在一个计算属性中可以完成各种复杂的逻辑，包括运算、函数调用等，只要最终...

Shihira 2019-08-23 16:02 评论0 收藏0
Vue中 Class 与 Style 绑定

摘要：与绑定数据绑定一个常见需求是操作元素的列表和它的内联样式。表达式的结果类型除了字符串之外，还可以是对象或数组。绑定对象语法我们可以传给一个对象，以动态地切换上面的语法表示的更新将取决于数据属性是否为真值。 Class 与 Style 绑定数据绑定一个常见需求是操作元素的 class 列表和它的内联样式。因为它们都是属性。因此，在 v-bind 用于 class 和 style 时，...

lemanli 2019-08-20 19:05 评论0 收藏0
学习Vue.js-Day1

摘要：学习内容，基本语法和概念，打包工具，实战操作参考文献官网官方资料库全家桶全家桶文档概念前端框架借助可以实现手机开发前端框架是一套构造用户界面的框架，只关于视图层前端的主要工作室跟用户界面打交道，中的，实现界面效果框架是为了提高开发学习内容 1，Vue基本语法和概念 2，打包工具 Webpack , Gulp3，实战操作参考文献：官网： https://cn.vuejs.org...

Cheriselalala 2019-08-29 16:34 评论0 收藏0
学习Vue.js-Day1

摘要：学习内容，基本语法和概念，打包工具，实战操作参考文献官网官方资料库全家桶全家桶文档概念前端框架借助可以实现手机开发前端框架是一套构造用户界面的框架，只关于视图层前端的主要工作室跟用户界面打交道，中的，实现界面效果框架是为了提高开发学习内容 1，Vue基本语法和概念 2，打包工具 Webpack , Gulp3，实战操作参考文献：官网： https://cn.vuejs.org...

Cristic 2019-08-02 11:23 评论0 收藏0