-
引入Vue的JavaScript文件，我们仍然推荐从CDN服务器加载它。
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
-
数据绑定（声明式渲染 ）。
<div id="app">
<h1>{{ product }}库存信息</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
const app = new Vue({
el: '#app',
data: {
product: 'iPhone X'
}
});
</script>
-
条件与循环。
<div id="app">
<h1>库存信息</h1>
<hr>
<ul>
<li v-for="product in products">
{{ product.name }} - {{ product.quantity }}
<span v-if="product.quantity === 0">
已经售罄
</span>
</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
const app = new Vue({
el: '#app',
data: {
products: [
{"id": 1, "name": "iPhone X", "quantity": 20},
{"id": 2, "name": "华为 Mate20", "quantity": 0},
{"id": 3, "name": "小米 Mix3", "quantity": 50}
]
}
});
</script>
-
计算属性。
<div id="app">
<h1>库存信息</h1>
<hr>
<ul>
<li v-for="product in products">
{{ product.name }} - {{ product.quantity }}
<span v-if="product.quantity === 0">
已经售罄
</span>
</li>
</ul>
<h2>库存总量：{{ totalQuantity }}台</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
const app = new Vue({
el: '#app',
data: {
products: [
{"id": 1, "name": "iPhone X", "quantity": 20},
{"id": 2, "name": "华为 Mate20", "quantity": 0},
{"id": 3, "name": "小米 Mix3", "quantity": 50}
]
},
computed: {
totalQuantity() {
return this.products.reduce((sum, product) => {
return sum + product.quantity
}, 0);
}
}
});
</script>
-
处理事件。
<div id="app">
<h1>库存信息</h1>
<hr>
<ul>
<li v-for="product in products">
{{ product.name }} - {{ product.quantity }}
<span v-if="product.quantity === 0">
已经售罄
</span>
<button @click="product.quantity += 1">
增加库存
</button>
</li>
</ul>
<h2>库存总量：{{ totalQuantity }}台</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
const app = new Vue({
el: '#app',
data: {
products: [
{"id": 1, "name": "iPhone X", "quantity": 20},
{"id": 2, "name": "华为 Mate20", "quantity": 0},
{"id": 3, "name": "小米 Mix3", "quantity": 50}
]
},
computed: {
totalQuantity() {
return this.products.reduce((sum, product) => {
return sum + product.quantity
}, 0);
}
}
});
</script>
-
用户输入。
<div id="app">
<h1>库存信息</h1>
<hr>
<ul>
<li v-for="product in products">
{{ product.name }} -
<input type="number" v-model.number="product.quantity" min="0">
<span v-if="product.quantity === 0">
已经售罄
</span>
<button @click="product.quantity += 1">
增加库存
</button>
</li>
</ul>
<h2>库存总量：{{ totalQuantity }}台</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
const app = new Vue({
el: '#app',
data: {
products: [
{"id": 1, "name": "iPhone X", "quantity": 20},
{"id": 2, "name": "华为 Mate20", "quantity": 0},
{"id": 3, "name": "小米 Mix3", "quantity": 50}
]
},
computed: {
totalQuantity() {
return this.products.reduce((sum, product) => {
return sum + product.quantity
}, 0);
}
}
});
</script>
-
通过网络加载JSON数据。
<div id="app">
<h2>库存信息</h2>
<ul>
<li v-for="product in products">
{{ product.name }} - {{ product.quantity }}
<span v-if="product.quantity === 0">
已经售罄
</span>
</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
const app = new Vue({
el: '#app',
data: {
products: []
}，
created() {
fetch('https://jackfrued.top/api/products')
.then(response => response.json())
.then(json => {
this.products = json
});
}
});
</script>
