码迷,mamicode.com
首页 > 其他好文 > 详细

Vue学习(一) :入门案例

时间:2019-06-11 23:34:38      阅读:246      评论:0      收藏:0      [点我收藏+]

标签:span   add   页面   rod   bin   uri   script   ||   --   

开始前的准备

IDE:VSCode(推荐)或者Sublime Text
前导技术:JavaScript中级

案例

页面代码:

<div id="app">
    <ul>
        <li v-for="product in products">
            <input type="number" v-model.number="product.quantity">
              {{ product.name }} <!--using double { to define an expression-->
            <span v-if="product.quantity === 0">
                - OUT OF STOCK
            </span>
            <span v-if="product.quantity < 0 || product.quantity % 1 != 0">
                - INVALID NUMBER
            </span>
            <button @click="product.quantity += 1">
              Add
            </button>
            <button @click="product.quantity -= 1">
              Minus
            </button>
        </li>
    </ul>
    <h2>Total Inventory: {{ totalProducts }}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    const app = new Vue({
        el: '#app', 
        data: {
            products: []
        },
        computed: {
            totalProducts () { // Here totalProducts() is a property of computed
                return this.products.reduce((sum, product) => {
                    return sum + product.quantity
                }, 0)
            }
        },
        created () {
            fetch('https://api.myjson.com/bins/clqnb')
              .then(response => response.json())
              .then(json => {
                  this.products = json.products
              })
        }
    })
</script>

json测试数据:

{
    "products":[
        {"id":1,"quantity":1,"name":"Compass"},
        {"id":0,"quantity":2,"name":"Jacket"},
        {"id":3,"quantity":5,"name":"Hiking Socks"},
        {"id":4,"quantity":2,"name":"Suntan Lotion"}
    ]
}

json托管(提供API):http://myjson.com/

注意:此处需能够访问的代理服务器!

Vue学习(一) :入门案例

标签:span   add   页面   rod   bin   uri   script   ||   --   

原文地址:https://www.cnblogs.com/xsjzhao/p/11006917.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!