Vue制作表单按钮编辑页

最新推荐文章于 2023-07-07 20:39:57 发布

原创

最新推荐文章于 2023-07-07 20:39:57 发布 · 464 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

本文档详细介绍了如何利用Vue.js框架来创建一个功能完善的表单编辑页面，包括设置、交互及数据绑定等内容。

在这里插入图片描述
vueFormSetting.html:

<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link href="../../build/common/base.css?v=1116" rel="stylesheet">
    <script type="text/javascript" src="../../build/common/base.js"></script>
    <script type="text/javascript" src="../../build/common/vueEdit.js?v=1111"></script>
</head>

<body class="vs-bg-gray page-form-setting">
    <div v-if="loaded" id="ctrl">
        <ul class="vs-setting-buttons">
            <li>
                <button class="btn btn-primary fa-save" @click="save()">保存</button>
            </li>
            <li>
                <button class="btn btn-default" @click="cancel()">取消</button>
            </li>
        </ul>
        <div class="form-horizontal">
            <btn-edit :btn-type="'general'" :btn-list="generalList" @change-prop="changeProp"></btn-edit>
            <btn-edit :btn-type="'detail'" :btn-list="detailList" @change-prop="changeProp"></btn-edit>
        </div>
    </div>
</body>
<script type="text/javascript">
    var vm = new Vue({
   
   
        el: "#ctrl",
        components: {
   
   
            'btn-edit': {
   
   
                props: {
   
   
                    btnList: {
   
   
                        type: Array,
                        default: ()

最低0.47元/天解锁文章