首页 新闻 搜索 专区 学院

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>

宋人鱼的主页 宋人鱼 | 初学一级 | 园豆:40
提问于:2022-03-10 21:17
< >
分享
最佳答案
0

加个双向绑定不行吗v-model

收获园豆:20
缘— | 菜鸟二级 |园豆:215 | 2022-03-11 10:11

好,我已经解决了

宋人鱼 | 园豆:40 (初学一级) | 2022-03-11 11:45
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册