Javascript Vue js:如何使用计算属性修改字符串并作为CSS类动态应用
我正在学习一个教程,我想添加一个新功能,其中每个候选人的姓氏都被添加为一个类。我让它内联工作,但后来我想清理它,并将其作为函数调用 在线工作Javascript Vue js:如何使用计算属性修改字符串并作为CSS类动态应用,javascript,vue.js,vuejs2,Javascript,Vue.js,Vuejs2,我正在学习一个教程,我想添加一个新功能,其中每个候选人的姓氏都被添加为一个类。我让它内联工作,但后来我想清理它,并将其作为函数调用 在线工作 mayor.name.replace(/ /g,'').replace('Mr.','').toLowerCase() 函数textClass从字符串中删除空格和“Mr.”。我尝试将其添加为计算属性,但不知道如何在mayor.name上调用它 CSS .black{ color: black;} .brown{ color: brown;} .pink{
mayor.name.replace(/ /g,'').replace('Mr.','').toLowerCase()
函数textClass
从字符串中删除空格和“Mr.”。我尝试将其添加为计算属性,但不知道如何在mayor.name上调用它
CSS
.black{ color: black;}
.brown{ color: brown;}
.pink{ color: pink;}
.red{ color: red;}
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;
})
}
}
});
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>
代码中几乎没有错误,其中一个错误是vue使用哈希对象,而不是字符串。因此,必须从computed属性返回如下哈希:{active:true}
第二件事是在vue中始终修改另一个vue属性或从方法返回的值,要更正这些属性或值,您需要进行以下更改:
您必须在computed属性中使用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>
我们的市长是{{Mayor.name}