<input type="text" placeholder="水果名" ref="fruitname" />
<input type="number" placeholder="价格" min="0" max="100" ref="fruitprice">
<button @click="addData">添加数据</button>
<ul v-for="(product,index) in products" :key="index">
<li>
{{product.name}}
<input type="number" v-model.number="product.quantity" min="0" max="100">
<span v-if="product.quantity===0">
_OUT OF STOCK
</span>
<!-- <button @click="product.quantity +=1">ADD</button> -->
<button @click="deletebtn(index)">Delete</button>
</li>
<!-- <li>{{product.addname}</li> -->
</ul>
<h2>Total Inventory :{{totalProducts}}</h2>
<script>
new Vue({
el: '#app',
data: {
products: []
},
//计算属性:求总价格
computed: {
totalProducts() {
return this.products.reduce((sum, product) => {
return sum + product.quantity
}, 0)
}s
},
mounted(e) {
//http://www.cjlly.com:3008/page
fetch('http://www.cjlly.com:3008/page')
.then(response => response.json())
.then(json => {
this.products = json
})
},
methods: {
addData: function (products) {
//获得输入框数据
let fruitname = this.$refs.fruitname.value; //获得输入框数据
let fruitprice = this.$refs.fruitprice.value;
this.products.push({ //将输入框中的内容push 到数组中
name: fruitname,
quantity: fruitprice
})
console.log(fruitname, fruitprice);
},
//根据引索,进行删除
deletebtn: function (index) {
this.products.splice(index, 1);
}
}
})
</script>
访问子组件实例或子元素
尽管存在 prop 和事件,有的时候你仍可能需要在 JavaScript 里直接访问一个子组件。为了达到这个目的,你可以通过 ref
这个 attribute 为子组件赋予一个 ID 引用。例如:
<input ref="usernameInput"></input>
现在在你已经定义了这个 ref 的组件里,你可以使用:获得输入框中的内容
this.$refs.usernameInput.value
实例方法 / 事件
只配合一个事件名使用 $emit
:
Vue.component('welcome-button', {
template: `
<button v-on:click="$emit('welcome')">
Click me to be welcomed
</button>
`
})
<div id="emit-example-simple">
<welcome-button v-on:welcome="sayHi"></welcome-button>
</div>
new Vue({
el: '#emit-example-simple',
methods: {
sayHi: function () {
alert('Hi!')
}
}
})
Screenshot.png
网友评论