style绑定v-bind:style——Vue.js

ゞ浴缸里的玫瑰 2022-04-21 21:18 214阅读 0赞

**`v-bind:style` 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象**

**对象语法：**

（1）CSS 属性名可以用**驼峰式 (camelCase)** 或**短横线分隔 (kebab-case，记得用单引号括起来)** 来命名：

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

style绑定对象，对象中有属性和对应的属性值，**要注意：组合单词的属性，记得用单引号**

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

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

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

**实例：红黑颜色的切换**

<div id="app">
            <span :style="styleObj" @click="handleFontColor">Hello World</span>
        </div>
        <script>
            var vm = new Vue({
                el: '#app',
                data: {
                    styleObj: {
                        color: 'red'
                    }
                },
                methods: {
                    handleFontColor(){
                        this.styleObj.color === 'red' ? this.styleObj.color = 'black' : this.styleObj.color = 'red'
                    }
                }
            })
        </script>

**数组语法：**

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

实例：字体红黑切换、字体大小为30px

<div id="app">
            <span :style="[styleObj1, styleObj2]" @click="handleFontColor">Hello World</span>
        </div>
        <script>
            var vm = new Vue({
                el: '#app',
                data: {
                    styleObj1: {
                        color: 'red'
                    },
                    styleObj2: {
                        fontSize: '30px'
                    }
                },
                methods: {
                    handleFontColor(){
                        this.styleObj1.color === 'red' ? this.styleObj1.color = 'black' : this.styleObj1.color = 'red'
                    }
                }
            })
        </script>

![20181114113243700.png][]

自动添加前缀：当 `v-bind:style` 使用需要添加[浏览器引擎前缀][Link 1]的 CSS 属性时，如 `transform`，Vue.js 会自动侦测并添加相应的前缀。

**多重值：**

（4）可以为 `style` 绑定中的属性提供一个包含多个值的数组，常用于提供多个带前缀的值

这样写只会渲染数组中最后一个被浏览器支持的值。

在本例中，如果浏览器支持不带浏览器前缀的 flexbox，那么就只会渲染 `display: flex`。

[20181114113243700.png]: /images/20220422/9b8e64b14ddf4acc8b6429588887e33f.png
[Link 1]: https://developer.mozilla.org/zh-CN/docs/Glossary/Vendor_Prefix