多重值

 

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

 

<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

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

 

组件上使用 class 属性

当你在带有单个根元素的自定义组件上使用 class 属性时，这些 class 将被添加到该元素中。此元素上的现有 class 将不会被覆盖。

 

实例 10

<div id="app">

    <runoob class="classC classD"></runoob>

</div>

 

<script>

// 创建一个Vue 应用

const app = Vue.createApp({})

 

// 定义一个名为 runoob的新全局组件

app.component('runoob', {

    template: '<h1 class="classA classB">I like runoob!</h1>'

})

 

app.mount('#app')

</script>

 

 

以上实例 div class 渲染结果为：

 

<h1 class="classA classB classC classD">I like runoob!</h1>