Vue中 v-bind的使用

1、v-bind的基本使用

作用：动态的绑定元素的属性

<div id="app">
  <!-- 这里不可以使用 mustache 语法
   v-bind 有一个语法糖==》 可以直接简写为 :

   -->
  <img v-bind:src="imageUrl" alt="博客园背景">
  <a v-bind:href="url" target="_blank">百度一下</a>

  <!--语法糖写法-->
  <img :src="imageUrl" alt="博客园背景">
  <a :href="url" target="_blank" style="color: blue">百度一下</a>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: "#app", //用于挂载要管理的元素
    data: {   //定义数据
      message: 'hello',
      url: 'http://www.baidu.com',
      imageUrl: 'https://images.cnblogs.com/cnblogs_com/
      houchen/1801587/o_210120143517jayzhou.jpeg'
    }
  })
</script>

2、v-bind 动态绑定class

1) 对象语法

v-bind:class="{类名1:boolean,类名2:boolean}"

<style>
.active{
  color: red;
}
.line{
  text-decoration: underline;
}
</style>

<div id="app">
  <!--<h2 v-bind:class="{类名1:boolean,类名2:boolean}">{{message}}</h2>
    当类名1 后面的布尔值为true时，class="类名1"
  -->
  <h2 v-bind:class="{active:isActive,line:isLine}">{{message}}</h2>
  <button v-on:click="changeToBlack">变黑</button>
</div>

 const app = new Vue({
    el: "#app", //用于挂载要管理的元素
    data: {   //定义数据
      message: 'hello',
      isActive: true,
      isLine: true
    },
    methods: {
      changeToBlack: function () {
        this.isActive = !this.isActive
      }
    }
  })

2）数组语法

<div id="app">
  <h2 v-bind:class="[active,line]">{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: "#app", //用于挂载要管理的元素
    data: {   //定义数据
      message: 'hello',
      active: 'active',
      line: 'line'
    }
  })
</script>

3、v-bind 动态绑定style

1)对象语法

:style="{css属性名:css属性值,css属性名:css属性值}"

<div id="app">
  <!--<h2 :style="{css属性名:css属性值,css属性名:css属性值}"></h2>-->
  <!-- 注意：red要加单引号，否则会被解析成变量 -->
  <h2 :style="{fontSize:fontSize,color:'red'}">{{message}}</h2>
</div>

2）数组语法

<div id="app">
  <!--<h2 :style="{css属性名:css属性值,css属性名:css属性值}"></h2>-->
  <!--<h2 :style="[baseStyle1]">{{message}}</h2>-->
  <h2 :style="[colorStyle,sizeStyle]">{{message}}</h2>
</div>


const app = new Vue({
  el: "#app", //用于挂载要管理的元素
  data: {   //定义数据
    message: 'hello',
    fontSize: "35px",
    baseStyle1: {fontSize:this.fontSize,color:'red'},
    colorStyle: {color:'blue'},
    sizeStyle: {fontSize:this.fontSize}
  }
})