Vue.js 样式绑定

Vue.js 样式绑定

可以用 v-bind 来设置样式属性。

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

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>demo</title>
</head>
<style>
  .pink{background:pink}
</style>
<body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

<div id="demo">
  <div v-bind:class="{pink:show}">我是个框框</div>
</div>

<script>
  var vm=new Vue({
    el: "#demo",
    data: {
      show:true
    }
  })
  //vm监听事件变化,第一个参数是新值,第二个参数是旧值
  //kilometers值发生改变时,执行回调
  vm.$watch("kilometers",function(newVal,oldVal){
    document.getElementById ("info").innerHTML = "修改前值为: " + oldVal + ",修改后值为: " + newVal;
  })
</script>

 

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>demo</title>
</head>
<style>
  .pink{background:pink}
  .blue{background: #abcdef;}
</style>
<body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

<div id="demo">
  <div v-bind:class="{pink:show,blue:show2}">我是个框框</div>
</div>

<script>
  var vm=new Vue({
    el: "#demo",
    data: {
      show:false,
      show2:true
    }
  })
  //vm监听事件变化,第一个参数是新值,第二个参数是旧值
  //kilometers值发生改变时,执行回调
  vm.$watch("kilometers",function(newVal,oldVal){
    document.getElementById ("info").innerHTML = "修改前值为: " + oldVal + ",修改后值为: " + newVal;
  })
</script>

 

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>demo</title>
</head>
<style>
  .pink{background:pink}
  .blue{background: #abcdef;}
</style>
<body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

<div id="demo">
  <div v-bind:class="myclass">我是个框框</div>
</div>

<script>
  var vm=new Vue({
    el: "#demo",
    data: {
      myclass:{
        "pink":true,
        "blue":false
      }
    }
  })
  //vm监听事件变化,第一个参数是新值,第二个参数是旧值
  //kilometers值发生改变时,执行回调
  vm.$watch("kilometers",function(newVal,oldVal){
    document.getElementById ("info").innerHTML = "修改前值为: " + oldVal + ",修改后值为: " + newVal;
  })
</script>

 

 也可以在这里绑定返回对象的计算属性

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>demo</title>
</head>
<style>
  .base{color:orange}
  .pink{background:pink}
  .blue{background: #abcdef;}
</style>
<body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

<div id="demo">
  <div v-bind:class="myclass">我是个框框</div>
</div>

<script>
  var vm=new Vue({
    el: "#demo",
    data: {
      "pink":true,
      "blue":{
        value:true,
        type:"real"
      }
    },
    //计算属性并返回对象
    computed:{
      myclass:function(){
        return {
          base:true,
          pink:this.pink && !this.blue.value,//粉色为true,蓝色value为false,则显示粉色
          blue:this.blue.value && this.blue.type==="real"//蓝色value为true,且type为real,则显示蓝色
        }
      }
    }
  })

</script>

 

 可以把一个数组传给 v-bind:class

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>demo</title>
</head>
<style>
  .base{color:orange}
  .pink{background:pink}
  .blue{background: #abcdef;}
</style>
<body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

<div id="demo">
  <div v-bind:class="[baseCls,pinkCls,blueCls]">我是个框框</div>
</div>

<script>
  var vm=new Vue({
    el: "#demo",
    data: {
      "baseCls":"base",
      "pinkCls":"pink",
      "blueCls":"blue"
    }
  })

</script>

 

 使用三元表达式来切换列表中的 class :

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>demo</title>
</head>
<style>
  .base{color:#fff}
  .pink{background:pink}
</style>
<body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

<div id="demo">
  <div v-bind:class="[baseCls,isPink?pinkCls:""]">我是个框框</div>
</div>

<script>
  var vm=new Vue({
    el: "#demo",
    data: {
      "baseCls":"base",
      "pinkCls":"pink",
      "isPink":true
    }
  })

</script>

这段代码表示颜色白色始终存在,当isPink为真时,背景颜色显示粉色

 

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

 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>demo</title>
</head>
<style>
  .base{color:#fff}
  .pink{background:pink}
</style>
<body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

<div id="demo">
  <div v-bind:style="{color:mycolor,fontSize:myfontSize,backgroundColor:mybg}">我是个框框</div>
</div>

<script>
  var vm=new Vue({
    el: "#demo",
    data: {
      "mycolor":"#fff",
      "myfontSize":"16px",
      "mybg":"pink"
    }
  })

</script>

 

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>demo</title>
</head>
<style>
  .base{color:#fff}
  .pink{background:pink}
</style>
<body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

<div id="demo">
  <div v-bind:style="mystyle">我是个框框</div>
</div>

<script>
  var vm=new Vue({
    el: "#demo",
    data: {
      mystyle:{
        "color":"#fff",
        "font-size":"16px",
        "background":"#abcdef"
      }
    }
  })

</script>

 

 可以使用数组将多个样式对象应用到一个元素上

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>demo</title>
</head>
<style>
  .base{color:#fff}
  .pink{background:pink}
</style>
<body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

<div id="demo">
  <div v-bind:style="[mystyle,mystyle2]">我是个框框</div>
</div>

<script>
  var vm=new Vue({
    el: "#demo",
    data: {
      mystyle: {
        "color": "#fff",
        "font-size": "16px",
        "background": "#abcdef"
      },
      mystyle2:{
        "font-weight":"bold"
      }
    }
  })

</script>

 

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

这个功能实在是太耐思了!!!