不使用v-for如何循环出数组的内容?

<!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 计算属性</title>
</head>

<body>
    <h3>computed 计算属性</h3>
    <hr>
    <div id="app">
        {{newPrice}}
        <br> {{newslist}}
    </div>
    <script>
    //   var    newsList =[
    //     { title: '香港或就“装甲车被扣”事件追责 起诉涉事运输公司', date: '2017/3/10' },
    //     { title: '日本第二大准航母服役 外媒:针对中国潜艇', date: '2017/3/12' },
    //     { title: '中国北方将有明显雨雪降温天气 南方阴雨持续', date: '2017/3/13' },
    //     { title: '起底“最短命副市长”:不到40天落马,全家被查', date: '2017/3/23' },
    // ];
    var app = new Vue({
        el: "#app",
        data: {
            price: 100,
            newsList: [
                { title: '香港或就“装甲车被扣”事件追责 起诉涉事运输公司', date: '2017/3/10' },
                { title: '日本第二大准航母服役 外媒:针对中国潜艇', date: '2017/3/12' },
                { title: '中国北方将有明显雨雪降温天气 南方阴雨持续', date: '2017/3/13' },
                { title: '起底“最短命副市长”:不到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>

希望循环输出newsList的内容。应该怎么写呢?另外,倒序排序reverse()好像也不对

回答:

首先,我建议还是使用v-for去循环数据之后渲染到页面上,这样做有两个很明显的好处:
1、简单,不用手动添加DOM;
2、要是使用computed方式,那么需要使用v-html去解析,这样带来的坏处相信你看官方文档也所有了解。


根据你的想法,谢了一个例子,直接复制粘贴运行便可看到效果,注意看我的写法和你的区别,找到问题所在:

<!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 计算属性</h3>
        <hr>
        <div>
            {{newPrice}}
            <ul v-html="newslists"></ul>
        </div>
    </div>
    <script type="text/javascript">
        new Vue({
            el: '#app',
            data: {
                price: 100,
                newsList: [
                    { title: '香港或就“装甲车被扣”事件追责 起诉涉事运输公司', date: '2017/3/10' },
                    { title: '日本第二大准航母服役 外媒:针对中国潜艇', date: '2017/3/12' },
                    { title: '中国北方将有明显雨雪降温天气 南方阴雨持续', date: '2017/3/13' },
                    { title: '起底“最短命副市长”:不到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>

希望我的回答对你有所帮助!

回答:

<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不是很简单吗

回答:

不用v-for就把数组的字符串形式直接输出?感觉需求是这样也没有什么问题,JSON.stringfy一下你觉得怎么样

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注