不使用v-for如何循環(huán)出數(shù)組的內(nèi)容？

<!DOCTYPE html>
<html lang="cmn-hans">

<head>
    <meta charset="utf-8">
    <meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <script src="../assets/js/vue.js"></script>
    <title>computed 計(jì)算屬性</title>
</head>

<body>
    <h3>computed 計(jì)算屬性</h3>
    <hr>
    <div id="app">
        {{newPrice}}
        <br> {{newslist}}
    </div>
    <script>
    //   var    newsList =[
    //     { title: '香港或就“裝甲車被扣”事件追責(zé) 起訴涉事運(yùn)輸公司', date: '2017/3/10' },
    //     { title: '日本第二大準(zhǔn)航母服役 外媒：針對(duì)中國(guó)潛艇', date: '2017/3/12' },
    //     { title: '中國(guó)北方將有明顯雨雪降溫天氣 南方陰雨持續(xù)', date: '2017/3/13' },
    //     { title: '起底“最短命副市長(zhǎng)”：不到40天落馬，全家被查', date: '2017/3/23' },
    // ];
    var app = new Vue({
        el: "#app",
        data: {
            price: 100,
            newsList: [
                { title: '香港或就“裝甲車被扣”事件追責(zé) 起訴涉事運(yùn)輸公司', date: '2017/3/10' },
                { title: '日本第二大準(zhǔn)航母服役 外媒：針對(duì)中國(guó)潛艇', date: '2017/3/12' },
                { title: '中國(guó)北方將有明顯雨雪降溫天氣 南方陰雨持續(xù)', date: '2017/3/13' },
                { title: '起底“最短命副市長(zhǎng)”：不到40天落馬，全家被查', date: '2017/3/23' },
            ],
        },
        computed: {
            newPrice: function() {
                return this.price = '￥' + this.price + '元';
            },
            newslist: function() {
                for (var i = 0; i < this.newsList; i++) {
                    return '<li>' + this.newsList[i].title + '-' + this.newsList[i].date + '</li>';
                }
            }
        }
    })
    </script>
</body>

</html>

希望循環(huán)輸出newsList的內(nèi)容。應(yīng)該怎么寫呢？另外，倒序排序reverse()好像也不對(duì)

回答

編輯回答

詆毀你

不用v-for就把數(shù)組的字符串形式直接輸出？感覺需求是這樣也沒有什么問題，JSON.stringfy一下你覺得怎么樣

2018年8月14日 19:03

編輯回答

網(wǎng)妓

首先，我建議還是使用v-for去循環(huán)數(shù)據(jù)之后渲染到頁(yè)面上，這樣做有兩個(gè)很明顯的好處：
1、簡(jiǎn)單，不用手動(dòng)添加DOM；
2、要是使用computed方式，那么需要使用v-html去解析，這樣帶來(lái)的壞處相信你看官方文檔也所有了解。

根據(jù)你的想法，謝了一個(gè)例子，直接復(fù)制粘貼運(yùn)行便可看到效果，注意看我的寫法和你的區(qū)別，找到問題所在：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>tab</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
    <div id="app">
        <h3>computed 計(jì)算屬性</h3>
        <hr>
        <div>
            {{newPrice}}
            <ul v-html="newslists"></ul>
        </div>
    </div>
    <script type="text/javascript">
        new Vue({
            el: '#app',
            data: {
                price: 100,
                newsList: [
                    { title: '香港或就“裝甲車被扣”事件追責(zé) 起訴涉事運(yùn)輸公司', date: '2017/3/10' },
                    { title: '日本第二大準(zhǔn)航母服役 外媒：針對(duì)中國(guó)潛艇', date: '2017/3/12' },
                    { title: '中國(guó)北方將有明顯雨雪降溫天氣 南方陰雨持續(xù)', date: '2017/3/13' },
                    { title: '起底“最短命副市長(zhǎng)”：不到40天落馬，全家被查', date: '2017/3/23' },
                ],
            },
            computed: {
                newPrice: function() {
                    return this.price = '￥' + this.price + '元';
                },
                newslists: function() {
                    let str = '';
                    for (var i = 0; i < this.newsList.length; i++) {
                        str += '<li>' + this.newsList[i].title + '-' + this.newsList[i].date + '</li>';
                    }
                    return str;
                }
            }
        })
    </script>
</body>
</html>

希望我的回答對(duì)你有所幫助！

2017年11月7日 12:09

編輯回答

傲寒

<ul v-html="newsList1()"><ul>

methods: {
          newsList1: function() {
                let _html = ''
                for (var i = 0; i < this.newsList.length; i++) {
                    _html += '<li>' + this.newsList[i].title + '-' + this.newsList[i].date + '</li>';
                }
                return _html
            }
        }

如果你非要這樣的話，用v-for不是很簡(jiǎn)單嗎

2018年8月15日 07:48