第二周day4

最新推荐文章于 2021-10-27 15:35:54 发布

Nekokwy

最新推荐文章于 2021-10-27 15:35:54 发布

阅读量92

点赞数

本文链接：https://blog.csdn.net/Nekokwy/article/details/101481459

版权

1、总结一下v-text和v-html和插值表达式的差别
v-text写在标签属性中，会覆盖标签中其他内容，和v-text不同，v-html可以将数据以html数据以代码形式显示。

2、完成创建一个vue对象并和id是app的div进行绑定，然后在该div中分别用插值表达式、v-text、v-html获取到vm下data中的msg的值
3、什么是MVVM模式，这样设计有什么优点
M表示存储数据的对象，VM表示一个中间者，V就是我们的html代码，我们要将M中的数据呈现在V中，引入了一个VM对象，V要显示数据，会找VM要，VM会从M中取到数据给V，如果V要改数据，也是通过调用VM，VM去真正改变M中的数据。我们初始化V的时候就会去取数据，所以最终的效果就是，V中数据和M中数据始终保持一致。

4、使用vue将下列data中cat记录显示插入到页面之中

<script>
var vm = {
	el: '#app',
	data: {
		cat: {
			name: '罗小黑',
			age: 18,
			desc: '是一只黑色的猫'
		}
</script>

5、使用vue，完成一个登陆校验功能
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>

<div>
    <div>用户名:</div>
    <input type="text" v-model="name">
    <div>密码:</div>
    <input type="password" v-model="password">
    <div>
    <button type="button" @click="login()">登录</button>
    <button type="button" @click="reg()">注册</button>
    </div>
</div>



<script src="js/vue.js"></script>
<script>
    export default {
        name: "login",
        data() {
            return {
                isReg: false,
                name: "syy",
                password: "123",
                repeat: ""
            };
        },
        methods: {
            login() {
                //验证姓名和密码是否与locastorage一致
                if (
                    localStorage.getItem("name") === this.name &&
                    localStorage.getItem("password") === this.password
                ) {
                    //清空输入框
                    this.name = "";
                    this.password = "";
                    // this.$router.push("/home/list");
                    alert("登陆成功")
                }else{
                    alert('用户名或密码不正确');
                }
            },
            reg() {
                this.isReg = true;
            },
            cancel() {
                this.isReg = false;
            },

        }
    };
</script>
</body>
</html>