Vue js: 계산된 속성을 사용하여 문자열을 수정하고 CSS 클래스로 동적으로 적용하는 방법

Vue js: 계산된 속성을 사용하여 문자열을 수정하고 CSS 클래스로 동적으로 적용하는 방법

저는 튜토리얼을 따르고 있는데, 각 후보자의 성이 클래스로 추가되는 새로운 기능을 추가하고 싶습니다.저는 이걸 인라인으로 작동시켰는데 정리해서 함수라고 부르고 싶었어요.

인라인 작업

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

★★textClass미스터 할지 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;
      })
    }
  }
});

코드에 오류가 거의 없습니다. 하나는 vue의 동적 클래스 바인딩으로 문자열이 아닌 해시 개체를 사용합니다.따라서 다음과 같은 해시를 반환해야 합니다.{ active: true }계산 속성에서 추출합니다.

두 번째는 vue의 계산된 속성입니다.항상 다른 vue 속성 또는 mehtod에서 반환된 값을 수정합니다.이러한 속성을 수정하려면 다음과 같이 변경해야 합니다.

쓰셔야 돼요.this.mayor.name하다

  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>

언급URL : https://stackoverflow.com/questions/41030233/vue-js-how-to-use-a-computed-property-to-modify-string-and-apply-dynamically-as