vue.js--＞v-bind指令

一、

v-bind指令：单向数据绑定

• 绑定动态属性

<div id="app">
<!--  错误写法     -->
  <a href="url">百度一下1</a>
  <br>
  <br>
  <br>
<!--  正确写法    -->
  <a v-bind:href="url">百度一下2</a>
  <br>
  <br>
  <br>
<!--  简写    -->
  <a :href="url">百度一下3</a>
</div>

</body>
</html>
<script>
  var vm = new Vue({
    el: '#app',
    data:{
      url:'https://www.baidu.com/'
    }

  })
</script>

其他属性同理，如：img的src、div的class等等。

• 绑定对象

<div id="app">
<!--  boolean为true:h2标签有对应类名  -->
<!--  boolean为false:h2标签无对应类名  -->
<!--  <h2 v-bind:class="{类名1：boolean,类名2：boolean}"></h2>-->
  <button v-on:click="btcolor"  v-bind:class="{fcolor:isFColor, bcolor:isBColor}">
    <h2>字体或背景颜色转换</h2>
  </button>

  <br>
  <br>
  <br>
  <h2 v-bind:class="{fcolor:isMClick}">按钮控制字体颜色</h2>
  <button v-on:click="btclick">按钮</button>
  <br>
  <br>
  <br>
  <button v-on:click="twobtclick" v-bind:class="{bcolor:isTwoClick}"><h2>one</h2></button>
  <button v-on:click="twobtclick" v-bind:class="{bcolor:!isTwoClick}"><h2>two</h2></button>
</div>

</body>
</html>
<script>
  var vm = new Vue({
    el: '#app',
    data:{
      message:"我的class在变",
      isFColor: true,
      isBColor: false,
      isMClick: false,
      isTwoClick: true

    },
    methods:{
      //字体或背景颜色转换  方法定义
      btcolor: function (){
        this.isFColor = ! this.isFColor;
        this.isBColor = ! this.isBColor;

      },
      //按钮控制字体颜色  方法定义
      btclick: function (){
        this.isMClick = !this.isMClick
      },
      //两个按钮选择
      twobtclick: function (){
        this.isTwoClick = !this.isTwoClick;
      }
    }
  })
</script>

v-bind:class="{key1:value1,key2:value2,······}"，大括号表示一个对象，对象里面有键和值，键就是类名，值是布尔值（true或false),用了v-bind:class=" ",还可以加普通的class，运行后会将两个用到的class合并。

<div id="app">
<!--  大括号里面键值对太多时,放到函数里,在调用  -->
<!--<button v-on:click="btcolor"  v-bind:class="{fcolor:isFColor, bcolor:isBColor}"></button>-->
  <button v-on:click="btcolor"  v-bind:class="getClasses()">
    <h2>字体或背景颜色转换</h2>
  </button>

<!--    加普通class    -->
  <h2 class="bcolor" v-bind:class="{fcolor:isMClick}">按钮控制字体颜色</h2>
  <button v-on:click="btclick">按钮</button>
  <br>
  <br>
  <br>

</div>

</body>
</html>
<script>
  var vm = new Vue({
    el: '#app',
    data:{
      isFColor: true,
      isBColor: false,
      isMClick: false,
    },
    methods:{
//字体或背景颜色转换  方法定义
      btcolor: function (){
        this.isFColor = ! this.isFColor;
        this.isBColor = ! this.isBColor;

      },
      //按钮控制字体颜色  方法定义
      btclick: function (){
        this.isMClick = !this.isMClick
      },
      getClasses: function (){
        return {fcolor:this.isFColor, bcolor:this.isBColor}
      }
    }
  })
</script>