另外一种实现checkbox的vue绑定方法代码：
给v-model绑定一个相同的数组类型的属性：
<div id="app">
<label>jack<input type="checkbox" v-model="whom" value="jack"/></label>
<label>bob<input type="checkbox" v-model="whom" value="bob"/></label>
<label>alice <input type="checkbox" v-model="whom" value="alice"/></label>
<p>已选：{{whom.join(‘|‘)}}</p>
</div>
<script>
var app = new Vue({
el: ‘#app‘,
data: {
whom: []
}
})
</script>
实现select多选的代码：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="../js/vue2.js"></script>
<script src="../js/vue-resource.js"></script>
</head>
<body>
<div id="app">
<select v-model="selected" multiple>
<option v-for="item in items" v-bind:value="item.value">{{item.text}}</option>
</select>
<span>已选:{{selected}}</span>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el: ‘#app‘,
data: {
items: [{ text: ‘A‘, value: ‘a‘ }, { text: ‘B‘, value: ‘b‘ }, { text: ‘C‘, value: ‘c‘ }],
selected: []
}
});
</script>
</body>
</html>
只需要在select标签中写入multiple属性(同时vue中，selected变量初始化为一个空数组)。
时间： 2024-08-07 03:31:13