如何使用Vue.js返回值

Question

我和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是成功的，因为其他数据可以正确显示。

Answer 1

Computed property就是你要找的东西。将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;
                }
            }
        })

    }
}

Answer 2

titleELLIPSIS被定义为一个方法，因此您需要实际调用它。

<h2 class="ellipsis-2">{{ titleELLIPSIS() }}</h2>

您使用它的方式就像它被定义为data或computed属性一样。