Question

我和Vue合作了好几天，遇到了一些问题。

我在模板中使用jQuery AJAX加载数据（文本内容），标题和描述需要省略号，我写了<h2 class="ellipsis-2">{{titleELLIPSIS}}</h2>↓

class NonAttackingQueen {
  static char [][] board = { {'X','X','X','X','X','X','X','X'}, 
                             {'X','X','X','X','X','X','X','X'},
                             {'X','X','X','X','X','X','X','X'},
                             {'X','X','X','X','X','X','X','X'},
                             {'X','X','X','X','X','X','X','X'},
                             {'X','Q','X','X','X','X','X','X'},
                             {'Q','X','X','X','X','X','X','X'},
                             {'X','X','X','X','X','X','X','X'} };
public static boolean diagonalsClear () {
    int numQueens;
    boolean clear = true;
    for (int numSpots = 1; numSpots < 9; numSpots++) {
        numQueens = 0;
        for (int row = 0; row < numSpots - 1; row++) {
            if (board[row][numSpots - 1 - row] == 'Q')
                numQueens++;
        }
        if (numQueens > 1) {
            clear = false;
            break;
        }
    }
    for (int numSpots = 7; numSpots > 0; numSpots--) {
        numQueens = 0;
        for (int row = 7; row > 7 - numSpots; row--) {
            if (board[row][15-row-numSpots] == 'Q')
                numQueens++;
        }
        if (numQueens > 1) {
            clear = false;
            break;
        }
      return clear;
    }
}

我的模板是：

$('td:eq(1)', nRow).attr('title', full_text);
$('td:eq(1)', nRow).css('cursor', 'pointer');
$('td:eq(2)', nRow).attr('title', full_text);
$('td:eq(2)', nRow).css('cursor', 'pointer');
$('td:eq(3)', nRow).attr('title', full_text);
$('td:eq(3)', nRow).css('cursor', 'pointer');
$('td:eq(4)', nRow).attr('title', full_text);
$('td:eq(4)', nRow).css('cursor', 'pointer');
$('td:eq(5)', nRow).attr('title', full_text);
$('td:eq(5)', nRow).css('cursor', 'pointer');
$('td:eq(6)', nRow).attr('title', full_text);
$('td:eq(6)', nRow).css('cursor', 'pointer');
$('td:eq(7)', nRow).attr('title', full_text);
$('td:eq(7)', nRow).css('cursor', 'pointer');
$('td:eq(8)', nRow).attr('title', full_text);
$('td:eq(8)', nRow).css('cursor', 'pointer');
$('td:eq(9)', nRow).attr('title', full_text);
$('td:eq(9)', nRow).css('cursor', 'pointer');
$('td:eq(10)', nRow).attr('title', full_text);
$('td:eq(10)', nRow).css('cursor', 'pointer');
$('td:eq(11)', nRow).attr('title', full_text);
$('td:eq(11)', nRow).css('cursor', 'pointer');
$('td:eq(12)', nRow).attr('title', full_text);
$('td:eq(12)', nRow).css('cursor', 'pointer');

我怎样才能在h2中返回省略号标题？

请给我一些想法。

顺便说一句，AJAX是成功的，因为其他数据显示正确。

Answer 1

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

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

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

Answer 2

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;
                }
            }
        })

    }
}

我怎么能用Vue.js返回值

2 个答案: