[英]How could I return value with Vue.js
我在Vue工作了幾天,遇到了一些問題。
我在模板中使用jQuery AJAX加載數據(文本內容),標題和描述需要省略號,我寫了methods
↓
methods:{
titleELLIPSIS:function(){
var title = self.articleList.title;//AJAX data
var titleLength = title.length;
var maxWidth = 15;
var newTitle = title.split("",maxWidth);
return title(function(ELLIPSIS){
if(titleLength>maxWidth){
for(var j=newTitle.length-1;j>0;j--){
delete newTitle[j];
var ELLIPSIS = self.innerHTML = newTitle.join('')+'...';
if(newTitle.length<=maxWidth){ break;}
return ELLIPSIS;
}
}
})
}
}
我的模板是:
<h2 class="ellipsis-2">{{titleELLIPSIS}}</h2>
如何在H2中返回省略號標題?
請給我一些想法。
順便說一下,AJAX是成功的,因為其他數據可以正確顯示。
您正在尋找計算屬性 。 將titleEllipsis
移至computed
部分:
computed: {
titleELLIPSIS:function(){
var title = self.articleList.title;//AJAX data
var titleLength = title.length;
var maxWidth = 15;
var newTitle = title.split("",maxWidth);
return title(function(ELLIPSIS){
if(titleLength>maxWidth){
for(var j=newTitle.length-1;j>0;j--){
delete newTitle[j];
var ELLIPSIS = self.innerHTML = newTitle.join('')+'...';
if(newTitle.length<=maxWidth){ break;}
return ELLIPSIS;
}
}
})
}
}
titleELLIPSIS
被定義為方法,因此您需要實際調用它。
<h2 class="ellipsis-2">{{ titleELLIPSIS() }}</h2>
您使用它的方式就像將其定義為data
或computed
屬性。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.