Vue和微信小程序绑定样式的区别_微信小程序内联样式可以是对象数组吗-CSDN博客

本文链接：https://blog.csdn.net/L_sixmoon/article/details/125743233

本文探讨了Vue和微信小程序在绑定样式上的差异。在小程序中，class和style绑定支持HTML特性，允许直接绑定及逻辑控制。而在Vue中，绑定更加灵活，支持字符串、对象和数组语法，同时能与普通class属性共存。详细介绍了Vue中class和内联样式的对象和数组语法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.小程序绑定

小程序里面的class与style绑定，遵循HTML特性绑定。在进行class与style绑定时，可以直接绑定，也可以带上逻辑与，或者三元运算进行条件控制。

JS
data: {
    dClass: 'my-class',
    dClass1: 'my-class1',
    dClass2: 'my-class2',
    dClass3: 'my-class3',
    dStyle: 'color:red;'
}
 
WXML
<view class="{{dClass}}"></view>
<view class="{{truthy ? dClass1 : dClass2}}"></view>
<view class="{{truthy && dClass3}}"></view>
<view style="{{dStyle}}"></view>

2.Vue绑定

在Vue里面，class与style绑定同样遵循着HTML绑定，我们只需要通过表达式计算出字符串即可。表达式结果的类型除了字符串之外，还可以是对象和数组。

2.1 Vue绑定class

字符串语法

JS
data() {
    return {
        myClass: 'my-class'
    }
}
 
HTML
<div :class="myClass"></div>

对象语法

JS
data: {
  isActive: true,
  hasError: false
}
 
HTML
<div :class="{ active: isActive }"></div>

数组语法

// JS
data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}
 
// HTML
<div :class="[isActive ? activeClass : '', errorClass]"></div>

在数组语法中也可以使用对象语法，如下所示：

:class指令可以与普通的class属性共存，如果你打算无论如何都要添加一个class，放置到普通的class属性中即可。

// JS
data: {
  isActive: true,
  hasError: false
}
 
// HTML
<div
  class="static"
  :class="{ active: isActive, 'text-danger': hasError }"
></div>

2.2 Vue绑定内联样式

对象语法

:style的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名：

// JS
data: {
  activeColor: 'red',
  fontSize: 30
}

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

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

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

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

数组语法

// HTML
<div v-bind:style="[baseStyles, overridingStyles]"></div>