v-bind指令

用途

• 当我们要改变html元素的样式, 图片路径时, 该如何不直接操作dom的情况下改变样式呢
• v-bind指令可以绑定HTML元素的属性, 例如src, href, Class, Style, id等

绑定属性

语法

• v-bind后使用冒号:, 代表绑定属性, 例如src
• 可以给属性赋值

  v-bind:src='表达式'
  

基本用法

绑定一个属性

<img v-bind:src="'img/p' + item.priority + '.png'" />

绑定多个属性(对象写法)

<img v-bind="{src:item.priority, index:index}" />

绑定Style

对象语法

v-bind指令参数通常是HTML元素的特性（attribute）

    v-bind:class

作用

基本用法

<li :style="{fontSize:'15px', color:'red'}">
<li v-for="(item,index) in tasks" :style="{fontSize:item.priority==0?'12px':'18px', color:item.priority==0?'blue':'red'}">

案例

绑定Class

语法

• 绑定元素的class属性, 改变css样式
• 可以将多个class存在对象里

    v-bind:class={style1: 'isGreen', 
                  style2: 'isRed'
                  style3: 'isYellow'
                  }

基本用法

需求: 显示或取消元素的样式

绑定一个class

<style>
.active {
    width: 100px;
    height: 100px;
    background: green;
    }
</style>

<div id="app">
  <div v-bind:class="{ active: isActive }">我是绿色的正方形</div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    isActive: true // 显示css样式
  }
})
</script>

绑定多个class

需求: 在对象中传入多个class来动态地切换是否使用该样式

• 多个class存在对象里
• 可以给每个class取个名字, 就是对象的key
• 通过在data里控制key的真假值
• 注：已经绑定的class可以与普通的class共存

HTML代码:

<!--只绑定了两个class-->
<ul class="box" v-bind:class="{textColor: isColor, textSize: isSize}">
    <li>学习Vue</li>
    <li>学习Node</li>
    <li>学习React</li>
</ul>

CSS代码:

<!--没有绑定box,会正常显示-->
.box{
    border:1px dashed #f0f;
}
.textColor{
    color:#f00;
    background-color:#eef;
}
.textSize{
    font-size:30px;
    font-weight:bold;
}

JS代码

var vm= new Vue({
    el:'.box',
    data:{
        isColor:true,  // 通过真假值来切换对应的class
        isSize:true
    }
})

结果:

• 以上代码执行后渲染为<ul class="box textColor textSize"></ul>

<li v-for="(item,index) in tasks" :class="{p0:item.priority==0, p1: item.priority==1}">

jQuery中css