Vue.js 样式绑定

Vue.js 样式绑定

Vue.js v-bind 在处理 class 和 style 时， 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。

可以为 v-bind:class 设置一个对象，从而动态的切换 class:

<template>
  div id="app">
    p v-bind:class="{active:isActive}">this is a text</pdiv>
>

script>
var count=1;
export default {
  name: 'App,data(){
    return{
      isActive:true
    }
  },}

style scoped>
.active{
  color:pink;
}
style>

 

 

可以在对象中传入更多属性用来动态切换多个 class 。

="{active:isActive,'light-bg':lightBg}"}
.light-bg
  backgroundlightgreen>

 

 

也可以直接绑定数据里的一个对象：

="classObj"{
      classObj:{
        active:light-bg
      }
      
    }
  },1)">>

 

可以把一个数组传给 v-bind:class ，实例如下：

="[activeCls,bgCls]"{
      activeCls:active
      
    }
  },1)">>

 

 

可以使用三元表达式来切换列表中的 class ：

="isActive?'active':''">

 

 

可以在 v-bind:style 直接设置样式：

v-bind:style="{color:mycolor,fontSize:myfontSize+'px'}"{
      mycolor:orange14>

 

 

也可以直接绑定到一个样式对象，让模板更清晰：

{
      classObj:{
        color:lightblue16px>

 

 

v-bind:style 可以使用数组将多个样式对象应用到一个元素上：

注意：当 v-bind:style 使用需要特定前缀的 CSS 属性时，如 transform ，Vue.js 会自动侦测并添加相应的前缀。

• 1:v-bind动态绑定指令，默认情况下标签自带属性的值是固定的，在为了能够动态的给这些属性添加值，可以使用v-bind:你要动态变化的值="表达式"
• 2:v-bind用于绑定属性和数据 ，其缩写为“ : ” 也就是v-bind:id === :id
• 3:v-model用在表单控件上的，用于实现双向数据绑定，所以如果你用在除了表单控件以外的标签是没有任何效果的。

 

动态调节样式

button v-on:click="fontSize--">smallbutton="fontSize++">big:style="{color:color,fontSize:fontSize+'px'}"{
      fontSize:16>

 

动态调节需要注意，以下两种情况：

<!-- 可以动态调节 -->
    >this is a text can change 不可以动态调节 ="objectStyle">this is a text cannot changethis.fontSize+px.color,}
    }
  },1)">>

 

 

正确的打开方式：动态调节需要注意在 data 里面调用 data 的数据是 undefined 的，正确的使用方法是使用 computed。（使用 methods 返回无效，可能是不支持这样的设置）

="methodsStyle()"="computedStyle" {fontSize:.color};
    }
  },computed:{
    computedStyle(){
      >

 

 

加一个 watch 方法，objectStyle 的方式也能实现动态变化。

.objectStyle.fontSizefontSize;
    }
  }
}

>