鍍金池/ 問答/HTML/ 如何根據(jù)數(shù)字正負(fù)給標(biāo)簽設(shè)置不同的樣式？

如何根據(jù)數(shù)字正負(fù)給標(biāo)簽設(shè)置不同的樣式？

vue中,如果對象的屬性數(shù)字大于0設(shè)置.style1,小于0設(shè)置.style2,等于0設(shè)置.style3 ，該如何設(shè)置？

data : {
   data1: 12,
   data2: -12,
   data3: 0
}

<div :class="">{{data.data1}}</div>
<div :class="">{{data.data2}}</div>
<div :class="">{{data.data3}}</div>
回答
編輯回答
近義詞

你可以用methods來實(shí)現(xiàn)，這樣簡潔一些。
Html：

<div id="dataList">
 <div :class="setColor(data1)">{{data1}}</div>
 <div :class="setColor(data2)">{{data2}}</div>
 <div :class="setColor(data3)">{{data3}}</div>
</div>

JS:

new Vue({
  el: '#dataList',
  data: {
   data1: 12,
   data2: -12,
   data3: 0
  },
  methods:{
    setColor: function(dataVal){
      if(dataVal > 0) return 'red';
      if(dataVal < 0) return 'green';
      return 'default';
    }
  }
});

Css:

.red {
  color: red;
}
.green {
  color: green;
}
.default {
  color: gray;
}
2018年8月24日 03:22
編輯回答
懶豬

  • css

            .class1{
            color:red
        }
        .class2{
            color:green
        }
        .class3{
            color:yellow
        }

  • html

    <div id="app">
  <div v-bind:class="{'class1':data1>0,'class2':data1===0,'class3':data1<0}">{{ data1 }}</p>
  <div v-bind:class="{'class1':data2>0,'class2':data2===0,'class3':data2<0}">{{ data2 }}</p>
  <div v-bind:class="{'class1':data3>0,'class2':data3===0,'class3':data3<0}">{{ data3 }}</p>
</div>

  • js

    new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!',
   data1: 12,
   data2: -12,
   data3: 0
  }
})

可以實(shí)現(xiàn)，但是冗余代碼太多，不知道具體要實(shí)現(xiàn)的是啥效果，有可優(yōu)化的地方，具體可以看：

2018年9月18日 02:09