动态绑定属性v-bind

v-bind的基本使用

通过绑定由服务器传过来的地址，以及语法糖

<div id="app">
  <img v-bind:src="imgURL">
  <a v-bind:href="aHref">阿里巴巴图标库</a>

  <!--语法糖的写法-->
  <img :src="imgURL" alt="">
  <a :href="aHref">阿里巴巴图标库</a>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data: {
      message: 'HelloWorld',
      imgURL: 'https://imgconvert.csdnimg.cn/aHR0cHM6Ly9hdmF0YXIuY3Nkbi5uZXQvNy83L0IvMV9yYWxmX2h4MTYzY29tLmpwZw#pic_center',
      aHref: 'https://www.iconfont.cn/'
    }
  })
</script>

v-bind动态绑定class（对象语法）

案例：将字体显示为红色

style都一致，写在开始，后面就不写了

<style>
  .active {
    color: red;
  }
</style>

方法一（不用v-bind）

<h2 class="active">{{message}}</h2>

方法二（用v-bind）

<h2 :class="active">{{message}}</h2>
<script>
  const app = new Vue({
    el:'#app',
    data: {
      message: 'HelloWorld',
      active: 'active',
    }
  })
</script>

使用对象都显示 {类名1:true,类名2:boolean}

<!--必须要有的用原来方法class，后面可能会删除的样式，用v-bind绑定-->
<h2 class="title" v-bind:class="{active :isActive,line:isLine}">{{message}}</h2>
......
 data: {
      message: 'HelloWorld',
      isActive: true,
      isLine: true
    },

通过按钮点击显示不同的样式，并将对象放在方法中

<h2 class="title" v-bind:class="getClasses()">{{message}}</h2>
  <button v-on:click="btnClick">按钮</button>
  <script>
  const app = new Vue({
    el:'#app',
    data: {
      message: 'HelloWorld',
      isActive: true,
      isLine: true
    },
    methods: {
      btnClick: function (){
        this.isActive = !this.isActive
      },
      getClasses:function (){
        return {active: this.isActive,line: this.isLine}
      }
    }
  })

v-bind动态绑定class（数组语法）

可以将class以数组形式显示
代码：

<div id="app">
  <h2 class="title" :class="[active,line]">{{message}}</h2>
  <h2 class="title" :class="getClasses()">{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data: {
      message: 'HelloWorld',
      active: 'aa',
      line: 'bb'
    },
    methods:{
      getClasses: function (){
        return [this.active,this.line]
      }
    }
  })
</script>
<style>
  .aa {
    background-color: red;
  }
  .bb {
    font-size: 50px;
  }
</style>

练习

点击无序列表中的任意一项，默认第一项字体为红色，此后点击哪一项，哪一项就为红色
代码：

<div id="app">
  <ul>
    <!--<li v-for="m in movies">{{m}}</li>-->
    <li v-for="(m,index) in movies" :class="{'active':option==index}" @click="change(index)" :title="m">{{index+1}}--{{m}}</li>
  </ul>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data: {
      movies: ['海王','海尔兄弟','秦时明月','全职高手'],
      option: 0
    },
    methods:{
      change: function (obj){
        //点击哪一项，哪一项就具有active 的样式
        this.option = obj
      }
    }
  })
</script>
<style>
  .active {
    color: red;
  }
</style>

v-bind动态绑定style（对象语法）

以**style="{key(css属性名):value(属性值)}">{{message}}**的形式
其中，key可以不加单引号，但value值必须要加单引号，否则是当成变量来解析

<h2 :style="{fontSize: '50px'}">{{message}}</h2>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data: {
      message: 'HelloWorld'
    }
  })
</script>

在data中定义好style

<div id="app">
<h2 :style="{fontSize: finalSize}">{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data: {
      message: 'HelloWorld',
      finalSize: '100px'
    }
  })
</script>

多个样式

<div id="app">
  <!--当成表达式-->
  <h2 :style="getStyles()">{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data: {
      message: 'HelloWorld',
      finalSize: 100,
      finalColor: 'red',
    },
    methods:{
      getStyles:function (){
        return {fontSize: this.finalSize+'px',backgroundColor:this.finalColor}
      }
    }
  })
</script>

v-bind动态绑定（数组语法）

代码：

<div id="app">
  <h2 :style="[baseStyle,baseStyle1]">{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data: {
      message: 'HelloWorld',
      baseStyle:{backgroundColor:'red'},
      baseStyle1:{fontSize:'50px'}
    }
  })
</script>