Vue-(六)HTML元素的屬性綁定

6-1.綁定資料為一個元素的class (影片)

以下寫法：會綁定css中命名為btnEnter的樣式

<button class="btnEnter">Enter</button>

以下v-bind寫法：會綁定JS中的屬性btnEnter的回傳值(可以是字串、物件、陣列)

<button v-bind:class="btnEnter">Enter</button>

完整案例示範-綁定回傳值：字串

<div id="app">
  <input type="text" v-model='text'/>
  <button v-bind:class='btnEnter'>Enter</button>
</div>

#app{
  text-align:center;
}
.enter{
  background-color:green;
  color:white;
  border:none;
  border-radius:8px;
  padding:9px;
}
.enter.disable{
  background-color:grey;
}

new Vue({
  el:'#app',
  data:{
      text:'',
  },
  computed:{
    btnEnter(){
      if(this.text.length === 0){
        return 'btnEnter disable';
      }else{
        return 'btnEnter';
      }
    },
  }
})

改寫-綁定回傳值：物件

• btnEnter:true —>render出來的class會含有btnEnter
• disabled:true —>render出來的class會含有disabled
• disabled:false —>render出來的class不會含有disabled

  new Vue({
    el:'#app',
    data:{
        text:'',
    },
    computed:{
      btnEnter(){
        console.log('111');
        if(this.text.length === 0){
          return {
            btnEnter:true,
            disabled:true,
          }
        }else{
          return {
            btnEnter:true,
            disabled:false,
          }
        }
      },
    }
  })

簡化寫法，只有在條件式成立為true時，class才會含有disable這個屬性

computed:{
    btnEnter(){
      return {
        btnEnter:true,
        disabled:this.text.length === 0,
      }
    }
  }

改寫-綁定回傳值：陣列

陣列中可以放入多個字串，代表含有這些css樣式

new Vue({
  el:'#app',
  data:{
      text:'',
      btnEnterAble:['btnEnter'],
      btnEnterDisabled:['btnEnter','disabled'],
  },
  computed:{
    btnEnter(){
      if(this.text.length === 0){
        return this.btnEnterDisabled;
      }else{
        return this.btnEnterAble;
      }
    }
  }
})

---

6-2.綁定資料為一個元素的style (影片)

以下寫法：在css定義樣式

<div id='app'>
  <h1>Hello</h1>
</div>

.h1{
    color:red;
}

以下寫法：直接在元素中定義style

<h1 style='color:red'>Hello</h1>

以下v-bind寫法：動態綁定在Vue實例中的屬性字串

<h1 v-bind:style="h1Style">Hello</h1>

完整案例示範-綁定回傳值：字串

<div id="app" :style="textCenter">
  <h1 :style="h1Style">Hello</h1>
</div>

new Vue({
  el:"#app",
  data:{
    textCenter:'text-align:center',
    h1Style:"color:red",
  },
})

改寫-綁定回傳值：物件

new Vue({
  el:"#app",
  data:{
    h1Style:{
      color:'white',
      fontSize:'20px',
      backgroundColor:'gray'
    },
  },
})

改寫-綁定回傳值：陣列

陣列中放物件，會依序套用陣列中的物件所定義的樣式
補充：樣式的定義中，key要用駝峰式命名，例：”font-size”要寫為”fontSize”

const commonStyle = {
  fontSize:'20px',
}
const whiteWord = {
  color:'white',
}
const grayBackground = {
  backgroundColor:'gray'
}
new Vue({
  el:"#app",
  data:{
    h1Style:[commonStyle,whiteWord,grayBackground]
  },
})

實作練習：

<div id="app">
  <h1 :style="h1Style">Hello</h1>
  <button @click="shrink">縮小</button>
</div>

new Vue({
  el:"#app",
  data:{
    h1Style:{
      color:'green',
      fontSize:'30px',
    }
  },
  methods:{
    shrink(){
      const size = parseInt(this.h1Style.fontSize.replace('px'),10);
      console.log(size);
      this.h1Style.fontSize = `${size-1}px`;    
    }
  }
})

改寫為更精簡化

new Vue({
  el:"#app",
  data:{
    size: 40,
  },
  computed:{
    h1Style(){
      return {
        color:'green',
        fontSize:`${this.size}px`,
      }
    }
  },
  methods:{
    shrink(){
      this.size--;
    }
  }
})