vuejs Ajax取得一个数据json数组

Question

vuejs Ajax取得一个数据json数组后，要通取回的数据再做判断一定只能通这种方式或者 套template标签

<template v-if="type === 'chanpin'">
                    <a v-for="(item,index) in arrList" :href="item.searchType == 1 ? urlConfig+'/searchProduct.html?keys='+item.searchContent : item.searchContent ">{{item.displayWords}}</a>
                </template>
                <template v-else>
                    <a v-for="(item,index) in arrList" :href="item.searchType == 1 ? urlConfig+'/vendorList.html?keys='+item.searchContent : item.searchContent ">{{item.displayWords}}</a>
                </template>

或者

<template v-for="(item,index) in arrList">
                    <template v-if="item.searchType ==1">
                        <a :href="urlConfig+'/searchProduct.html?keys='+item.searchContent">{{item.displayWords}}</a>
                    </template>
                    <template v-else>
                        <a :href="item.searchContent">{{item.displayWords}}</a>
                    </template>
                </template>

这样才行吗？？？？？？？？？？

Answer 1

问题分析分两步走

• Ajax取得数据

• Vue渲染数据

问题存在于如何写模板？这个是一个基础问题，我建议最好先看一下官方文档学习一下，这个和MVC的套模板标签有相似之处，也有差异之处。

    <div id="app">
        <my-item></my-item>
    </div>
    <template id="item">
        <div>
            <ol>
                <li v-for="list in lists"  v-if="list.age >= 18">
                    <span>{{list.name}}</span>
                    <span>{{list.age}}</span>
                </li>
            </ol>
        </div>
    </template>
    <script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            components: {
                myItem: {
                    template: '#item',
                    data: function() {
                        return {
                            lists: [{
                                name: 'a',
                                age: 10
                            },{
                                name: 'b',
                                age: 18
                            },{
                                name: 'c',
                                age: 12
                            }]
                        }
                    }
                }
            }
        })
    </script>

上面做的事情就是参照你的template来写的，只是没有获取ajax数据，获取数据前会多一个v-if的判定步骤或者现在这样设置一些默认值，Ajax获取到数据以后把数据绑定到lists上。后面的逻辑就就包含了一个循环遍历数据和判断数据（补充学习前面的v-if），不知道是不是能解决你的疑问了？最后还是建议先从文档开始。