vuejs怎么把下拉选择的值填入要填的位置？
这是demo：https://jsfiddle.net/kanjiushi/dwg6zm50/
要达到的效果是：选择了哪一项，就把选择的那项的值替换“请选择数量”这几个字。
jsfiddle可能打不开，再贴上demo代码：
<html>
<head>
<meta charset="utf-8">
<link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/tether/1.3.2/css/tether.min.css" rel="stylesheet">
</head>
<body>
<div class='container' id="app">
<div class="dropdown">
<input type="hidden" name="amount" v-model="chosenAmount" value="">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
请选择数量
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu1">
<a class="dropdown-item" v-for="item in items" v-on:click="fillIn(item)" data-salary="{{item.message}}">{{ item.message }}个</a>
</div>
</div>
</div>
<script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/tether/1.3.2/js/tether.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/vue/1.0.24/vue.min.js"></script>
<script type="text/javascript">
var amount = new Vue({
el: '#app',
chosenAmount: '',
data: {
items: [
{message: '1'},
{message: '2'},
{message: '3'}
]
},
methods: {
fillIn: function (item) {
this.chosenAmount = item.message;
}
}
});
</script>
</body>
</html>https://jsfiddle.net/hsfzxjy/esw77kjt/3/
让你html里绑定一个动态的文字就好了：
<div class='container' id="app">
<div class="dropdown">
<input type="hidden" name="amount" v-model="chosenAmount" value="">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" >
{{ chosenAmount }}
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu1">
<a class="dropdown-item" v-for="item in items" v-on:click="fillIn(item)" data-salary="{{item.message}}">{{ item.message }}个</a>
</div>
</div>
</div>var amount = new Vue({
el: '#app',
data:{
chosenAmount: '',
items: [
{message: '1'},
{message: '2'},
{message: '3'}
]
},
ready: function(){
//这个初始化不能放在data里仅仅是因为bootstrap.js也会对data-toggle="dropdown"进行一些transform，那会覆盖掉初始化在data中的值。于是我们选择了生命周期的ready里，即在bootstrap处理之后再绑定初始文字
this.chosenAmount = '请选择数量';
},
methods: {
fillIn: function (item) {
this.chosenAmount = item.message;
}
}
});