<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
</style>
</head>
<body>
<div id="app">
<fieldset>
<legend>新商品信息</legend>
<div>
<label>名称：</label>
<input type="text" v-model="newProduct.name"/>
</div>
<div>
<label>价格：</label>
<input type="text" v-model="newProduct.price"/>
</div>
<div>
<label>类别：</label>
<select v-model="newProduct.category">
<option v-for="cate in categories" v-bind:value="cate">
{{cate}}
</option>
</select>
</div>
<div>
<label></label>
<button @click="createProd">添加</button>
</div>
</fieldset>
<div>
<label>查询关键字：</label>
<input type="text" v-model="key"/>
</div>
<table>
<thead>
<tr>
<th>名称</th>
<th>价格</th>
<th>类别</th>
<th>删除</th>
</tr>
</thead>
<tbody>
<tr v-for="(prod,index) in findProdList">
<td>{{prod.name}}</td>
<td>{{prod.price | priceFormat}}</td>
<td>{{prod.category}}</td>
<td><button @click="deletaProd(index)">删除</button></td>
</tr>
</tbody>
</table>
</div>
</body>
<script src="js/vue.js"></script>
<script>
var em=new Vue({
el:'#app',
data:{
key:"",
newProduct:{
name:"",price:0,category:"手机/数码"
},
categories:[
"手机/数码",
"电脑/办公",
"居家/家具",
"男装/女装",
"房产/汽车"
],
productes:[
{name:"男士卫衣",price:100,category:"男装女装"}
]
},
filters:{
priceFormat:function(val){
return "$"+parseInt(val).toFixed(2)+"元";
}
},
methods:{
createProd:function(){
this.productes.push(this.newProduct);
this.newProduct={
name:"",price:0,category:"手机/数码"
}
},
deletaProd:function(index){
if(confirm("删除当前商品信息吗")){
this.productes.splice(index,1)
}
}
},
computed:{
findProdList:function(){
var _this=this;
return _this.productes.filter(function(prod){
return prod.name.indexOf(_this.key)!=-1;
})
}
}
});
</script>
</html>
3354
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
