美文网首页
vue 加 element v-model 的双向绑定input

vue 加 element v-model 的双向绑定input

作者: 郭的妻 | 来源:发表于2019-08-10 11:37 被阅读0次
    这种的可以加input,使用v-model就可以双向绑定值
    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" type="text/css" href="../css/l_index.css" />
    <link rel="stylesheet" type="text/css" href="../css/zjm-style.css" />
    <link rel="stylesheet" href="">
    <style type="text/css">
        .el-message-box--center {
            padding-top: 30px;
        }
        
        .el-button {
            padding: 12px 40px;
        }
        
        .el-dialog__header {
            padding: 0px!important;
        }
        
        .el-dialog__body {
            padding: 24px 20px;
        }
        
        .el-dialog__footer {
            padding: 14px 20px 24px 20px;
        }
    </style>
    
    <body>
        <div id="z-content">
            <el-button type="text" @click="showtoast0">打开嵌套表单的 Dialog</el-button>
    
            <el-dialog :visible.sync="showtoast1" width="38%" :show-close="false" style="text-align: center;">
                <i class="iconfont icon-gantanhao"></i>
                <p class="zjm-p1">购买提示</p>
                <p class="zjm-p2">为确保账号安全性,需输入密码进行支付</p>
                <p class="zjm-p2">后台密码:
                    <el-input placeholder="请输入后台密码" v-model="passval" show-password class="zjm-password"></el-input>
                </p>
                <div slot="footer" class="dialog-footer" style="text-align: center;">
                    <el-button type="primary" @click="showconfim">确 定</el-button>
                    <el-button @click="showcancl">取 消</el-button>
                </div>
            </el-dialog>
        </div>
    </body>
    <!-- import Vue before Element -->
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <!-- import JavaScript -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="../js/echarts.js"></script>
    <script>
        new Vue({
            el: '#z-content',
            data: function() {
                return {
                    showtoast1: false,
                    passval: ""
                }
            },
            methods: {
                /*点击一个按钮触发弹窗*/
                showtoast0() {
                    this.showtoast1 = true;
                },
                /*点击弹窗的确认按钮*/
                showconfim() {
                    let val = this.passval;
                    if(val != "") {
                        this.$message({
                            message: '后台密码输入正确',
                            type: 'success'
                        });
                        setTimeout(function() {
                            this.showtoast1 = false;
                        }, 500)
                    } else {
                        this.$message.error('请填写后台密码');
                    }
    
                },
                /*点击弹窗的取消按钮*/
                showcancl() {
                    this.showtoast1 = false;
                }
            }
    
        })
    </script>
    
    </html>

    相关文章

      网友评论

          本文标题:vue 加 element v-model 的双向绑定input

          本文链接:https://www.haomeiwen.com/subject/ifzljctx.html