Vue.js实战读书笔记--v-bind及class与style绑定_当 v-bind:style 使用需要添加浏览器引擎前缀的 css property 时,如 tra-CSDN博客

本文链接：https://blog.csdn.net/m0_37176232/article/details/85107819

第4章 v-bind及class与style绑定

4.1 了解v-bind指令

在数据绑定中，常见的两个需求是元素的样式名称class和内联样式style的动态绑定，它们也是html的属性，因此可以使用v-bind指令。

4.2 绑定class的几种方式

4.2.1 对象语法

v-bind:class设置一个对象，可以动态切换class，例如：

<div id="app">
         <div :class="{'active':isActive}"></div>
</div>
<script>
         var app = new Vue({
                   el:"app",
                   data:{
                            isActive:true
                   }
         })
</script>

上述中类名active是否绑定在元素上依据isActive是否为true。对象中也可以传入多个属性，动态切换class。其中，:class和普通的class共存。

<div id="app">
         <div :class="{'active':isActive,'error':isError}"></div>
</div>

当:class中的表达式每一项都为真时，对应类名就会加载。当表达式的值改变时，对应的class类名也会相应更新。

当:class的表达式过长或者逻辑复杂时，可以绑定一个计算属性。一般当条件多于两个时，都可以用data或computed，例如，

<div id="app">
         <div :class="classes"></div>
</div>
<script>
         var app = new Vue({
                   el:"app",
                   data:{
                            isActive:true,
                            error:null,
                   },
                   computed:{
                            classes:function(){
                                    return {
                                              active:this.isActive && !this.error,
                                             'text-fail':this.error && this.error.type === 'fatal'
                                     }
                            }
                   }
         })
</script>

4.2.2 数组语法

当需要应用多个class时，可以使用数组语法，给:class绑定一个数组，应用一个class列表：

<div id="app">
         <div :class="activeCls,errorCls"></div>
</div>
<script>
         var app = new Vue({
                   el:'#app',
                   data:{
                            activeCls:'active',
                            errorCls:'error',
                   }
         })
</script>

结果：<div class=" active error "></div>

也可以使用三元表达式切换class，例如，

<div id="app">
     <div :class="[isActived?activeCls:'' , errorCls]"></div>
</div>
<script>
     var app = new Vue({
              el:'#app',
              data:{
                       isActived:true,
                       activeCls:'active',
                       errorCls:'error',
              }
     })
</script>

4.2.3 在组件上使用

如果直接在自定义组件上使用class或:class，样式规则会直接应用在这个组件的根元素上，例如，

Vue.component('my-component',{
         template:'<p class="article"></p>'
})
<div id="app">
         <my-component :class="{'active':isActive}"></my-component>
</div>
<script>
         var app = new Vue({
                   el:'#app',
                   data:{
                           isActive:true,
                  }
         })
</script>

结果：<p class=”article active”>一些文本</p>

上述用法只适用于自定义组件最外层的根元素，否则无效。当不满足这种条件或需要给具体子元素设置类名时，应当使用组件的props来传递。

4.3 绑定内联样式

绑定内联样式可以通过对象语法、数组语法、自动添加前缀、多重值绑定。其中，对象语法和数组语法与class类似。其中：

4.3.1 自动添加前缀

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

注：CSS 前缀--主流浏览器引擎前缀:

-webkit- (谷歌, Safari, 新版Opera浏览器等)

-moz- (火狐浏览器)

-o- (旧版Opera浏览器等)

-ms- (IE浏览器和 Edge浏览器)

4.3.2 多重值