036——VUE中表单控件处理之动态绑定文章的属性的处理方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单控件处理之动态绑定文章的属性的处理方法 </title>
    <script src="vue.js"></script>
</head>
<body>
<div id="lantian">
    <!--单选-->
    {{state}}
    <div v-for="v in type">
        <input type="radio" v-model="state" :value="v.name">{{v.title}}
    </div>


    <!--多选:-->
    {{cheBox}}
    <div v-for="v in flag">
        <input type="checkbox" v-model="cheBox" :value="v.name">{{v.title}}
    </div>

</div>
<script>
    var app = new Vue({
        el: '#lantian',
        data: {
            type: [
                {name: 'draft', title: '草稿'},
                {name: 'send', title: '正式发布'},
                {name: 'times', title: '延迟发布'}
            ],
            flag: [
                {name: 'hot', title: '热门'},
                {name: 'recommend', title: '推荐'},
            ],
            state:'send',
            cheBox:[]
        }
    });
</script>

</body>
</html>

  

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