v-bind:Vue.js 中動態值的樣式

Question

當我使用v-bind:style 來使用動態值時，我遇到了v-bind:style 不起作用的問題，但我確信v-bind:style 得到了正確的值(:style='{控制台中的color : red(任何其他值) }') 和樣式部分中的css 反映成功。為什麼不使用 v-bind 呢？任何想法 ？ ？非常感謝。

<div class="l-modal" v-if="modalVisible1">
      <div class="p-modal" @click="hide_modal" :style='{ color : titleColor1 }' ref="test">
        <p>{{titleTxt1}}</p>
        <p>{{contentTxt1}}</p>
        <p>{{endTxt1}}</p>
        <button class="p-modal__btn">{{buttonTxt1}}</button>
      </div>
</div>
<div class="l-modal__bg" v-if="modalBgVisible1" @click="hide_modal"></div>

data () {
    return {
      selected_title_color1:'',
      titleColor1:'',
      colors:['紅色','藍色','黃色','粉色','土地色','水藍色','灰色','淺綠色','橙色'],
      colors_dic:{紅色:'red',藍色:'blue',黃色:'yellow',粉色:'pink',土地色:'blawn',水藍色:'aqua',灰色:'gray',淺綠色:'palegreen',橙色:'orange'},
    }
},
watch:{
    selected_title_color1: function () {
      this.titleColor1 = this.colors_dic[this.selected_title_color1];
    }
  },

Answer 1

請檢查以下程式碼片段，看起來一切正常：

new Vue({
  el: "#demo",
  data () {
      return {
        selected_title_color1:'',
        titleColor1:'',
        colors:['紅色','藍色','黃色','粉色','土地色','水藍色','灰色','淺綠色','橙色'],
        colors_dic:{紅色:'red',藍色:'blue',黃色:'yellow',粉色:'pink',土地色:'blawn',水藍色:'aqua',灰色:'gray',淺綠色:'palegreen',橙色:'orange'},
        modalVisible1: true,
      }
  },
  watch:{
    selected_title_color1: function () {
      this.titleColor1 = this.colors_dic[this.selected_title_color1];
    }
  },
})

sssccc


      

        
{{ titleColor1 }} - {{ selected_title_color1 }}
      


  Select color
  
    {{ option }}
  

Answer 2

如上所述，您應該使用 compulated 屬性作為樣式。
這也會自動反映道具的任何變化。
如果您有某些條件，您也可以根據計算的回呼函數中的值修改這些值。我添加了一個暗模式範例來闡明這種方法。

export default {
  data(){ return {
        selected_title_color1:'',
        titleColor1:'',
        colors:['紅色','藍色','黃色','粉色','土地色','水藍色','灰色','淺綠色','橙色'],
        colors_dic:{紅色:'red',藍色:'blue',黃色:'yellow',粉色:'pink',土地色:'blawn',水藍色:'aqua',灰色:'gray',淺綠色:'palegreen',橙色:'orange'},
        modalVisible1: true,
        darkmode: false, // example value
  }},

  watch:{
    selected_title_color1: function () {
      this.titleColor1 = this.colors_dic[this.selected_title_color1];
    }
  },

  computed: {
     // Here comes your style magic.
     // Return an Object that you will bind to the style prop.  
     // Changes to any reactive value will be reflected directly.  
     style(){
        // create the base style here.        
        let newStyle = {}

        // apply your titleColor1 which results in style="{color:titleColor1}"
        if(this.titleColor1){
          this.color = this.titleColor1
        }

        // if you would have more conditions you can add them here, too
        // just an _example_ if you would have a darkmode value in data.
        if(this.darkmode){
          this.backgroundColor = '#222222'
        }          ​
            ​
       ​return newStyle
    ​}
 ​},

 ​methods: {
    ​// rest of methods if 
 ​}
}

然後使用 :style="style" 將其附加到您的 div。

     ​

       ​
{{titleTxt1}}
       ​
{{contentTxt1}}
       ​
{{endTxt1}}
       ​{{buttonTxt1}}
     ​

我這邊的提示。我將外包用於設定顏色的程式碼並將該方法綁定到更改顏色的事件，而不是使用觀察器。這可以使您的應用程式更加靈活並清理它。但您的做法也有效。