代码拉取完成,页面将自动刷新
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<div>
用户名:
<input v-model='a' type="text" id="username">
<br> 密码:
<input v-model='b' type="password" id="password">
<br>
<span style="color: red">{{result}}</span>
<button @click='handle'>登录</button>
</div>
</div>
<script src="./js/vue.js"></script>
<script>
// 需求: 点击按钮, 要得到用户在输入框输入的用户名和密码,如果用户名和密码是zhangsan和123456, 则在span标签内部显示: 登录成功, 否则显示用户名或者密码错误
// 使用v-on的方式对button进行点击事件的监听
const vm = new Vue({
el: '#app',
data: {
a: '',
b: '',
result: ''
},
methods: {
handle: function () {
if (this.a == 'zhangsan' && this.b == '123456') {
this.result = '登录成功'
} else {
this.result = '用户名或密码错误'
}
}
}
})
</script>
</body>
</html>
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。