SOURCE

<div id="app">
    <h1>情形1 直接引用</h1>
    <h2>{{ product }} are in stock.</h2>

    <h1>情形2 循环引用</h1>
    <ul>
	    <li v-for="product in products">
            {{ product }}
        </li>
    </ul>

    <h1>情形3 引用服务器json数据</h1>
    因为跨域无法实现
    <ul>
	    <li v-for="product in products2">
            {{ product }}
        </li>
    </ul>
    {{ products2 }}

    <h1>情形4 使用手写json串</h1>
    <ul>
        <li v-for="product in products3">
            数量: {{ product.qty }} 商品: {{ product.name }}
            <span v-if="product.qty === 0" style="color: red">
                - OUT OF STOCK!
            </span>
        </li>
    </ul>

    <h1>情形5 使用 form 修改数据 可以看到 mvvm 的威力 (情形4 的信息跟着变化)</h1>
    <ul>
        <li v-for="product in products">
            {{ product }}
        </li>
    </ul>
</div>


<script src="https://unpkg.com/vue"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            product: 'Boots',
            products: ['Boots', 'Socks', 'Ball', 'Cup'],
            products2: null,
            products3: [{"id" : 1, "qty" : 2 , "name": "Boots"}, 
                        {"id" : 2, "qty" : 0 , "name": "Ball"}, 
                        {"id" : 3, "qty" : 4 , "name": "Socks"}, 
                        {"id" : 4, "qty" : 5 , "name": "Motor"},
                        {"id" : 5, "qty" : 6 , "name": "lamp"}
                       ] 
        },
        created () {
            // 下面代码因为跨域访问 拒绝服务 无法实现
            console.log("******下面代码因为跨域访问 拒绝服务 无法实现******")
            fectch('https://suggest.taobao.com/sug?code=utf-8&q=大炮')
                .then(response => {
                    // 第一个then 返回状态
                    console.log(response.json())
                })
                .then(json => {
                    // 第二个then 返回数据
                    this.products2 = json.result
                })
                .then(err => {
                    // 第三个then 返回error信息
                    console.log(err)
                })
        }
    })
    
</script>

body {
    background-color: #ddd;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}