vue基础之实践项目
1、需要修改的代码
<!DOCTYPE html>
<html lang="en">
<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 /></div>
<div>密码：<input /></div>
<button>登录</button>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@3.4.14/dist/vue.global.min.js">
</script>
<script>
const { createApp } = Vue
createApp({
data() {
return {
userName: '',
password: '',
message: '密码错误，请重新输入!'
}
}
}).mount('#app')
</script>
</html>
2、修改要求
（1）使用双向绑定将userName和password绑定在用户名、密码。
（2）创建一个新的html节点并将message绑定在这个节点上，将它的id设置为msgDom。
（3）对登录按钮绑定一个点击事件。
（4）自己定义一个showMsg变量，并且用条件语句绑定在 msgDom。
（5）在点击事件中判断密码是否为qzzg，不匹配则显示 message。
3、修改之后的代码
<!DOCTYPE html>
<html lang="en">
<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="userName" /></div>
<div>密码：<input v-model="password" type="password" /></div>
<button @click="checkLogin">登录</button>
<div v-if="showMsg" id="msgDom">{{ message }}</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@3.4.14/dist/vue.global.min.js"></script>
<script>
const { createApp } = Vue;
const app = createApp({
data() {
return {
userName: '',
password: '',
message: '密码错误，请重新输入!',
showMsg: false,
}
},
methods: {
checkLogin() {
console.log(this.password,this.password == "qzzg")
if(this.password == "qzzg") {
this.message = "密码正确!";
this.showMsg = true;
} else {
this.message = "密码错误，请重新输入!";
this.showMsg = true;
}
}
}
});
app.mount('#app');
</script>
</html>
4、运行结果
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。