Vue js：如何使用计算的属性修改字符串并动态应用为 CSS class

Question

我正在学习教程，我想添加一个新功能，其中将每个候选人的姓氏添加为 class。我让它内联工作，但后来我想清理它，而是将其作为函数调用。

在线工作

mayor.name.replace(/ /g,'').replace('Mr.','').toLowerCase()

函数textClass从字符串中删除空格和"Mr."。我试过将其作为计算属性添加，但我不知道如何在 mayor.name

上调用它

CSS

.black{ color: black;}
.brown{ color: brown;}
.pink{ color: pink;}
.red{ color: red;}

HTML

<div class="container">

  <div id="mayor-vote">
    <h2>Mayor Vote</h2>
    <ul class="list-group" style="width: 400px;">
      <li v-for="candidate in candidates" class="list-group-item clearfix">
        <div class="pull-left">
          <strong style="display: inline-block; width: 100px;">{{ candidate.name }}:</strong> {{ candidate.votes }}
        </div>
        <button class="btn btn-sm btn-primary pull-right" @click="candidate.votes++">Vote</button>
      </li>
    </ul>
    <h2>Our Mayor is <span class="the-winner" :class="mayor.name.textClass">{{ mayor.name }}</span></h2>
    <button @click="clear" class="btn btn-default">Reset Votes</button>
  </div>

</div>
</body>

JS

 new Vue({

  el: '#mayor-vote',

  data: {
    candidates: [
      { name: "Mr. Black", votes: 140 },
      { name: "Mr. Red", votes: 135 },
      { name: "Mr. Pink", votes: 145 },
      { name: "Mr. Brown", votes: 140 }
    ]
  },

  computed: {
    mayor: function(){
      var candidateSorted = this.candidates.sort(function(a,b){
        return b.votes - a.votes;
      });
      return candidateSorted[0];
    },
    textClass: function() {
      return this.replace(/ /g,'').replace('Mr.','').toLowerCase();
    }
  },

  methods: {
    clear: function() {
      this.candidates = this.candidates.map( function(candidate){
        candidate.votes = 0;
        return candidate;
      })
    }
  }
});

Answer 1

你的代码中有几个错误，一个是 dynamic class binding 在 vue 中采用哈希对象，而不是字符串。所以你必须 return 像这样的散列：{ active: true } 来自计算的属性.

第二件事是 computed property 在 vue 中总是修改另一个 vue 属性或值 return 从方法中编辑，要更正这些你需要进行以下更改：

您必须在计算属性中使用 this.mayor.name 来计算动态 class，如下所示：

  computed: {
    mayor: function(){
      var candidateSorted = this.candidates.sort(function(a,b){
        return b.votes - a.votes;
      });
      return candidateSorted[0];
    },
    textClass: function() {
      var tmp = {}
      tmp[this.mayor.name.replace(/ /g,'').replace('Mr.','').toLowerCase()] = true
      return tmp
    }
  },

并在 HTML 中这样应用：

<h2>Our Mayor is <span class="the-winner" :class="textClass">{{ mayor.name }}</span></h2>

Vue js：如何使用计算的属性修改字符串并动态应用为 CSS class

Vue js: How to use a computed property to modify string and apply dynamically as CSS class

javascript

vue.js

vuejs2

Vue js：如何使用计算的 属性 修改字符串并动态应用为 CSS class

Vue js: How to use a computed property to modify string and apply dynamically as CSS class

javascript

vue.js

vuejs2

Vue js：如何使用计算的属性修改字符串并动态应用为 CSS class