37.VUE学习之-表单的综合运用

最新推荐文章于 2025-08-13 21:05:35 发布

weixin_30799995

最新推荐文章于 2025-08-13 21:05:35 发布

阅读量103

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/haima/p/10247847.html

本文介绍了一个使用Vue.js构建的表单管理组件，该组件包括文章标题、栏目选择、属性设置、点击数输入、链接配置、摘要编辑、类型选择等功能。通过实时预览和数据绑定，展示了Vue.js在表单处理方面的强大能力。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>vue</title>
    <link rel="stylesheet" href="">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- <script type="text/javascript" src="../js/vue.js"></script> -->
    <style type="text/css">
        .h1{
            color: red;
        }
        .h2{
            color: green;
        }
        img{
            width: 150px;
            height: auto;
        }
    </style>
</head>
<body>
<div id="hdcms">
    <form action="" class="form-horizontal">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">文章管理</h3>
            </div>
            <div class="panel-body">
                <div class="form-group">
                    <label for="" class="col-sm-2 control-label">标题</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" v-model.trim.lazy="field.title">
                        {{field.title}}
                    </div>
                </div>
                <div class="form-group">
                    <label for="" class="col-sm-2 control-label">栏目</label>
                    <div class="col-sm-10">
                        <select v-model="field.cid" class="form-control" multiple>
                            <option value="">==请选择栏目==</option>
                            <option v-for="v in category" :value="v.cid">{{v.title}}</option>
                        </select>
                    </div>
                    {{field.cid}}
                </div>
                <div class="form-group">
                    <label for="" class="col-sm-2 control-label">属性{{field.flag}}</label>
                    <div class="col-sm-10">
                        <div class="checkbox-inline" v-for="v in flag">
                            <input type="checkbox" v-model="field.flag" :value="v.name"> {{v.title}}
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label for="" class="col-sm-2 control-label">点击数</label>
                    <div class="col-sm-10">
                        <input type="number" class="form-control" v-model.number="field.click">
                    </div>
                </div>
                <div class="form-group">
                    <label for="" class="col-sm-2 control-label">链接</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" v-model="field.url"><br>
                        <img :src="field.url" alt="">
                    </div>
                </div>
                <div class="form-group">
                    <label for="" class="col-sm-2 control-label">摘要</label>
                    <div class="col-sm-10">
                        <textarea name="" class="form-control"
                                  v-model="field.description"></textarea>
                    </div>
                    {{field.description}}
                </div>
                <div class="form-group">
                    <label for="" class="col-sm-2 control-label">类型</label>
                    <div class="col-sm-10">
                        <div class="radio-inline" v-for="v in type">
                            <input type="radio" v-model="field.type" :value="v.name"> {{v.title}}
                        </div>
                        {{field.type}}
                    </div>
                </div>
            </div>
        </div>
        <button class="btn btn-primary col-sm-offset-2">保存</button>
    </form>
</div>
<script>
    var app = new Vue({
        el: '#hdcms',
        watch: {
            'field.click': function (n, o) {
                console.log(typeof(n));
            },
            'field.title':function(n,o){
                console.log(n.length);
            }
        },
        data: {
            type: [
                {name: 'draft', title: '草稿'},
                {name: 'send', title: '正式发布'},
                {name: 'times', title: '延迟发布'}
            ],
            flag: [
                {name: 'hot', title: '热门'},
                {name: 'recommend', title: '推荐'}
            ],
            category: [
                {cid: 1, title: 'hdphp新闻'},
                {cid: 2, title: 'HDCMS'},
                {cid: 3, title: '后盾人新闻'},
                {cid: 4, title: '后盾IT教育新闻'}
            ],
            field: {
                title: '后盾人 人人做后盾',
                click: 100,
                url: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2034208240,2505314860&fm=26&gp=0.jpg',
                description: '这是内容接要',
                type: 'send',
                flag: [],
                cid: []
            }
        },
        methods: {}
    });
</script>
</body>

</html>

效果: