Vue:style详解

发布时间：2023-05-19

一、vuestyle绑定

vue:style是一个非常方便的指令，它可以在Vue组件中为HTML元素添加CSS样式。要为元素添加样式，可以通过v-bind:style绑定一个CSS样式对象。

<!-- HTML -->
<div v-bind:style="{ color: 'red', fontSize: '30px' }">
  This text will be red and 30px
</div>

// JavaScript
data: {
  myStyles: {
    color: 'red',
    fontSize: '30px'
  }
}

上述代码中，用了一个对象直接绑定了样式，如果是一个变量的话也是同样的使用方式。

二、vuestyle判断

在Vue中，可以使用三元运算符来判断是否添加某个样式，这非常有用。例如：

<!-- HTML -->
<div v-bind:style="{ color: isActive ? 'red' : 'green' }">
  This text will be red if isActive is true, or green if it is false
</div>

// JavaScript
data: {
  isActive: true
}

三、vuestyle设置

如果你想为元素添加多个CSS属性，可以通过使用对象语法，将多个属性添加到同一个v-bind:style绑定中。

<!-- HTML -->
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">
  This will be the color {{ activeColor }} and font size {{ fontSize }}px
</div>

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

四、vuestyle动态绑定

你可以动态地绑定v-bind:style的对象，这对于根据一些计算属性实现动态样式非常有用。

<!-- HTML -->
<div v-bind:style="styleObject">
  This will have the styles applied to it
</div>

// JavaScript
data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  },
},
computed: {
  isNormal: function () {
    return this.styleObject.fontSize === '13px'
  }
},
watch: {
  isNormal: function (val) {
    if (val) {
      this.styleObject.color = 'green'
    } else {
      this.styleObject.color = 'red'
    }
  }
}

五、vuestyle写变量

除了为指令传递对象，还可以直接在指令中书写变量：

<!-- HTML -->
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }">
  This will be the color {{ activeColor }} and font size {{ fontSize }}px
</div>

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

六、vuestyle loader 顺序

Vue Loader提供的style-loader和CSS Loader会自动将CSS转换为JavaScript，然后在网页上运行。同时，你可以使用PostCSS和Sass来预处理CSS。但是，我们需要注意loaders的执行顺序。

module: {
  rules: [
    {
      test: /\.css$/,
      use: [
        'vue-style-loader',
        'css-loader',
        'postcss-loader',
        'sass-loader'
      ]
    }
  ]
}

七、vuestyle标签怎么设置

vue:style可以被赋值一个对象或是绑定一个对象。针对内联样式的object，它里面的属性名和属性值分别用来表示CSS属性名和属性值。你可以使用camelCase(驼峰式)或kebab-case(短横线) CSS属性名来定义对应的Vue组件元素的内联样式。 要为一个元素设置内联样式，可以使用对象语法：

<!-- HTML -->
<div :style="{ fontSize: size + 'px' }"></div>

// JavaScript
data: {
  size: 10,
}

八、vuestyle标签的用法

在Vue.js的template内，你可以使用vue:style对象达到以下目的：

  • 内联样式
  • CSS Transform 2D/3D
  • 使用CSS Variables来进行动态赋值CSS属性值
  • 和animate.css结合使用来添加过渡效果动画 使用场景：
  • 在特定场景下非常有用，尤其是在计算属性值时应用动态CSS的时候
  • 针对某些使用外部脚本更新选择器的情况（如：脚本的i++），vue:style方式会更简单更有用

九、vue style背景图片路径怎么写

在Vue中设置背景图片路径的时候，需要使用require来进行文件引入，否则会无法加载图片。示例：

<!-- HTML -->
<div :style="{backgroundImage: 'url(' + imgPath + ')'}"></div>

// JavaScript
data: {
  imgPath: require('@/assets/images/bg.jpg'),
}

十、vue style 如何导入css文件

在Vue中可以通过import引入CSS文件：

// JavaScript
import '@/assets/css/styles.css';

然后在<style>中使用即可：

<!-- HTML -->
<style lang="scss" scoped>
@import "~@/assets/css/styles.css";
.my-class {
  ...
}
</style>

总结

Vue:style指令非常方便，它可以在Vue组件中为HTML元素添加CSS样式。通过学习本篇文章，你可以掌握vuestyle绑定、vuestyle判断、vuestyle设置、vuestyle动态绑定、vuestyle写变量、vuestyle loader 顺序、vuestyle标签怎么设置、vuestyle标签的用法、vue style背景图片路径怎么写、vue style 如何导入css文件等相关知识。

推荐文章