vue 加 element v-model 的双向绑定input
2019-08-10 本文已影响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>
