vue下拉框值得选择改变表格中内容
0
悬赏园豆：20
[已解决问题]
解决于 2022-06-23 17:28
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/vue.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css" />
</head>
<body>
<div id="div1">
<select v-model="b">
<option v-for="v in a" :value="v.name">{{v.name}}</option>
</select>
<table class="table table-bordered table-striped" style="width:40%;">
<thead>
<tr>
<td>商品名称</td>
<td>商品价格</td>
<td>折扣</td>
<td>购买数量(请填写数量)</td>
</tr>
</thead>
<tbody>
<tr v-for="v in a">
<td>{{v.name}}</td>
<td>{{v.price}}</td>
<td>{{v.discount}}折</td>
<td style="padding: 0;"><input v-model="c" class="form-control" style="border-radius: 0px;"/></td>
</tr>
<tr>
<td colspan="4">您选择的商品为{{b}},数量{{c}},总价为</td>
</tr>
</tbody>
</table>
</div>
</body>
<script>
var s=new Vue({
el:"#div1",
data:{
a:[
{name:"猪肉炖鸡蛋",price:35,discount:8,number:0},
{name:"猪肉炖粉条",price:40,discount:85,number:0},
{name:"小鸡炖蘑菇",price:50,discount:86,number:0},
{name:"酸菜炖蘑菇",price:20,discount:7,number:0},
],
b:"猪肉炖鸡蛋",
c:"",
d:[]
},
computed:{
com:function(){
if(b=="猪肉炖鸡蛋"){
return
}
}
}
})
</script>
</html>
最佳答案
0
加个双向绑定不行吗v-model
收获园豆：20
好，我已经解决了
