v-bind: Gaya untuk nilai dinamik dalam Vue.js

Question

Apabila saya menggunakan v-bind:style untuk menggunakan nilai dinamik, saya menghadapi masalah dengan v-bind:style tidak berfungsi, tetapi saya pasti v-bind:style mendapat nilai yang betul (:style='{ dalam console color:red(any other value)}') dan css dalam bahagian gaya mencerminkan berjaya. Mengapa tidak menggunakan v-bind? Ada idea? ? Terima kasih banyak-banyak.

P粉087074897 · Answer

Sila semak coretan kod berikut, semuanya kelihatan baik:

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 }}

P粉384366923 · Answer

Seperti yang dinyatakan di atas, anda harus menggunakan atribut compulated untuk gaya.
Ini juga secara automatik akan mencerminkan sebarang perubahan pada prop.
Jika anda mempunyai syarat tertentu, anda juga boleh mengubah suai nilai berdasarkan nilai yang dikira dalam fungsi panggil balik. Saya telah menambah contoh Mod Gelap untuk menggambarkan pendekatan ini.

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 
 }
}

Kemudian gunakan :style="style" untuk menambahkannya pada div anda.


     
       {{titleTxt1}}
       {{contentTxt1}}
       {{endTxt1}}

Petua dari pihak saya. Daripada menggunakan pemerhati, saya akan menyumber luar kod untuk menetapkan warna dan mengikat kaedah itu kepada peristiwa yang mengubah warna. Ini boleh menjadikan aplikasi anda lebih fleksibel dan membersihkannya. Tetapi apa yang anda lakukan juga berkesan.