Vue核心概念-1

最新推荐文章于 2024-08-22 14:32:34 发布

Iamall2016

最新推荐文章于 2024-08-22 14:32:34 发布

阅读量115

点赞数

文章标签： javascript json ViewUI

原文链接：http://www.cnblogs.com/muyuenansheng/p/9526543.html

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
       <ul>
        <li v-for="product in products">
            <!--{{product}}-->
            <!--{{product.quantity}}{{product.name}}-->
           <!--直接写入商品的数量--创建一个文本框，通过V-MODEL指令绑定商品数量字段，指定这一定是一个数字-->
            <input type="number" v-model.number="product.quantity">{{product.name}}
            <span v-if="product.quantity===0">
                <!--在项目数量为0的时候出现-->
                OUT OF STOCK
            </span>
            <!--添加交互行为--点击add，商品数量加1-->
            <button @click="product.quantity+=1">
                add
            </button>
        </li>
    </ul>
    <!--打印列表中商品的总数-->
    <h2>Total Inventory:{{totalProducts}}</h2>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
    const app = new Vue({
        el:'#app',
        data: {
            products:[]
        },           //从空列表开始
        computed:{      //创建一个名为totalProducts的计算属性
            totalProducts(){
                return this.products.reduce((sum,product)=>{
                            return sum + product.quantity
                        },0)
            }
        },
            created() {            //从一个实际的API获取我们的商品信息
                fetch("https://api.myjson.com/bins/74l63")
                     .then(response => response.json())   //当应用创建时，我们会从此API获取最新的商品消息
                       //这就是要从这里获取的全部
                        .then(json => {
                    this.products=json.products
                })
            }
        })
</script>
</body>
</html>

转载于:https://www.cnblogs.com/muyuenansheng/p/9526543.html

Iamall2016

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue核心概念-1

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app"> <ul> &l...
复制链接

扫一扫