Vue v-bind 绑定属性、class、style

v-bind

1.动态的绑定属性

 <div id=“app”>
  <img v-bind：src="imageUrl">
  <a v-bind:href="aHref"</a>
</div>

<script src="../js/vue.js"></script>
<script>
let app=new Vue({
  el:'app',
  data:{
    imageUrl:'www.jdmdkdkh738394.webp', //假装是图片
    aHref:'www.baidu.com'
  }
)}
</script>

v-bind语法糖（缩写）

 <div id=“app”>
  <img ：src="imageUrl">
  <a :href="aHref"</a>
</div>

2.动态绑定class

正常绑定

<div id=“app”>
  <img :class="style">
</div>

根据布尔值绑定

 <div id=“app”>
   <img :class="{active:isActive}">
  <img :class="{active:isActive，active2:isActive2}">
  //可以加多个 true显示  false 不显示  key:class名字  isActive：布尔值
</div>
<script>
let app=new Vue({
  el:'app',
  data:{
  isActive:true, //true显示  false 不显示  
  }
)}
</script>

对象语法绑定class

 <div id=“app”>
  <img class="styledemo" :class="{active:isActive}">
  //普通的class  和动态的class可以共存
  <button v:on:click="btnClick">我是一个按钮</button>
</div>
<script>
let app=new Vue({
  el:'app',
  data:{
  isActive:true, //true显示  false 不显示  
  },
  methods:{
    btnClick:function(){
      this.btnClick=!this.btnClick
    }
  }
)}
</script>

//用一个方法绑定class
 <div id=“app”>
  <img class="styledemo" :class="getClass()">//这是个方法
  <button v-on:click="btnClick">我是一个按钮</button>
</div>
<script>
let app=new Vue({
  el:'app',
  data:{
  isActive:true, //true显示  false 不显示  
  },
  methods:{
    getClass:function(){
     return {active:this.isActive}
    }
  }
)}
</script>

数组语法绑定class

 <div id=“app”>
   <h2 class="title" :class=[aaa,bbb]>
</div>
<script>
let app=new Vue({
  el:'app',
  data:{
    aaa:'style',
    bbb:'style2'
  }
)}
</script>

<div id=“app”>
   <h2 class="title" :class=>
</div>
<script>
let app=new Vue({
  el:'app',
  data:{
    aaa:'style',
    bbb:'style2'
  },
  methods:{
  getclass:function()
   {//把data里的值取出来
     return [this.aaa,this.bbb]
   )
}
</script>

3.动态绑定style

 <div id=“app”>
   //<h2 class="title" :style="{key(属性名):value(属性值)}"}>
   <h2 class="title" :style="{font-size:'50px'}"}>
   <h2 class="title" :style="{font-size:finallySize+'px'}"}>
   //finallySize是从下面拿的一个变量 不用加引号
  
   <h2 class="title" :style="getStyle()">
   //从方法里拿
</div>
<script>
let app=new Vue({
  el:'app',
  data:{
    finallySize:100
  },methods:{
      getStyle:function(){
         return {font-size:this.finallySize+'px'}
      }
}
)}
</script>