炫意html5
最早CSS3和HTML5移动技术网站之一

vue下拉框值得选择改变表格中内容

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title></title>
<script src=”https://q.cnblogs.com/q/139312/js/vue.js”></script>
<link rel=”stylesheet” href=”https://q.cnblogs.com/q/139312/css/bootstrap.min.css” />
</head>
<body>
<div>
<select v-model=”b”>
<option v-for=”v in a” :value=”v.name”>{{v.name}}</option>
</select>
<table>
<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><input v-model=”c”/></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>

回答

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

炫意HTML5 » vue下拉框值得选择改变表格中内容

Java基础教程Android基础教程