035——VUE中表单控件处理之使用vue控制select操作文字栏目列表 

<!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>

　　

posted @ 2017-12-28 14:24  生如逆旅，一苇以航  阅读(1192)  评论(0)  编辑  收藏  举报