<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单控件处理之使用vue控制select操作文字栏目列表 </title>
<script src="vue.js"></script>
</head>
<body>
<div id="lantian">
<div>{{cid}}</div>
<!--select单选-->
<!--<select v-model="cid">-->
<!--select多选-->
<select v-model="cid" multiple>
<option value="">请选择栏目</option>
<!--select单选的时候：-->
<option v-for="v in category" :value="v.cid">{{v.title}}</option>
</select>
</div>
<script>
var app = new Vue({
el: '#lantian',
data: {
category: [
{cid: 1, title: 'PHP课程'},
{cid: 2, title: 'HTML课程'},
{cid: 3, title: 'JAVA课程'},
{cid: 4, title: 'JQUERY课程'}
],
// cid:3
cid: []
}
});
</script>
</body>
</html>