vue select 数据绑定方法
vue select 数据绑定方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue 数据绑定 - select</title>
<script src="./js/vue.min.js"></script>
</head>
<body>
<div id="vm01">
{{ message }}
</div>
<hr>
<div id="vm02">
<select v-model="s_selected" @change="select_change">
<option v-for="(item,index) in s_option" :key="index" :value="item.value" v-text="item.title"></option>
</select>
</div>
<script>
var vm01 = new Vue({
el: '#vm01',
data: {
message: 'Hello Vue!'
}
});
var vm02 = new Vue({
el: '#vm02',
data: {
s_option: [
{
"title": "请选择",
"value": 0
},
{
"title": "AAA",
"value": 10
},
{
"title": "BBB",
"value": 20
},
{
"title": "CCC",
"value": 30
},
],
s_selected: 0
},
methods:{
select_change(e){
this.s_selected = parseInt(e.target.value);
console.log('s_selected->',this.s_selected);
console.log('change_index->',e.target.selectedIndex) // 选择项的index索引
console.log('change-value->',e.target.value) // 选择项的value
}
}
});
</script>
</body>
</html>