javascript - page - vue keep alive

Vue.js: estilo de clase condicional

Question

Tengo algunos datos a los que se puede acceder a través de:

{{ content[''term_goes_here''] }}

... y esto evaluado como true o false . Me gustaría agregar una clase dependiendo de la veracidad de la expresión así:

<i class="fa" v-bind:class="[{{content[''cravings'']}} ? ''fa-checkbox-marked'' : ''fa-checkbox-blank-outline'']"></i>

donde true me da la clase fa-checkbox-marked y falso me da fa-checkbox-blank-outline . La forma en que lo escribí arriba me da un error:

- invalid expression: v-bind:class="[{{content[''cravings'']}} ? ''fa-checkbox-marked'' : ''fa-checkbox-blank-outline'']"

¿Cómo debo escribirlo para poder determinar condicionalmente la clase?

Answer 1

¿Por qué no pasar un objeto a v-bind: class para alternar dinámicamente la clase?

<div v-bind:class="{ disabled: order.cancelled_at }"></div>

Esto es lo que recomiendan los documentos de Vue .

Answer 2

Usa la sintaxis del objeto .

v-bind:class="{''fa-checkbox-marked'': content[''cravings''],  ''fa-checkbox-blank-outline'': !content[''cravings'']}"

Cuando el objeto se vuelva más complicado, extráigalo en un método.

v-bind:class="getClass()"

methods:{
    getClass(){
        return {
            ''fa-checkbox-marked'': this.content[''cravings''],  
            ''fa-checkbox-blank-outline'': !this.content[''cravings'']}
    }
}

Finalmente, puede hacer que esto funcione para cualquier propiedad de contenido como esta.

v-bind:class="getClass(''cravings'')"

methods:{
  getClass(property){
    return {
      ''fa-checkbox-marked'': this.content[property],
      ''fa-checkbox-blank-outline'': !this.content[property]
    }
  }
}

Answer 3

el problema es la cuchilla, prueba esto

<i class="fa" v-bind:class="[''{{content[''cravings'']}}'' ? ''fa-checkbox-marked'' : ''fa-checkbox-blank-outline'']"></i>

Answer 4

<i class="fa" v-bind:class="cravings"></i>

y agregue calculado:

computed: {
    cravings: function() {
        return this.content[''cravings''] ? ''fa-checkbox-marked'' : ''fa-checkbox-blank-outline'';
    }
}