第三周周四作业

最新推荐文章于 2021-06-16 22:40:01 发布

狐姬

最新推荐文章于 2021-06-16 22:40:01 发布

阅读量141

点赞数

文章标签：作业

本文链接：https://blog.csdn.net/weixin_44023804/article/details/101165514

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>周四作业</title>
    <script src="js/vue.js"></script>

</head>
<body>
<div style="width:600px;border: 1px solid sandybrown;">
    <p>
        <h3>第一题</h3>
        v-text,v-html,{{}}都可以读取data中对应名字的内容。
        v-text是按照文本显示的，就算你用了其他标签，也会按照文本来显示
        v-html，按照浏览器来显示
    </p>
    <p>
        <h3>第三题</h3>
        MVVM模式
        M表示储存对象，VM表示一个中间者，V就是我们的HTML代码
    我们要将M中的数据呈现在V中，引入了一个VM对象，V要显示数据，会找VM要，
    VM会从M中取到数据给V，如果V要改数据，也是通过调用VM，VM去真正改变M中的数据。
    我们初始化V的时候就会去取数据，所以最终的效果就是，V中数据和M中数据始终保持一致。
    </p>
</div>
<div id="app">
    <div style="width:600px;border: 1px solid darkseagreen;margin-top: 5px;">
        <h3>第二题</h3>
        <p>{{msg}}</p>
        <p v-text="msg"></p>
        <p v-html="msg"></p>
    </div>

    <div style="width:600px;border: 1px solid paleturquoise;margin-top: 5px;">
        <h3>第四题</h3>
        <p>我叫{{cat.name}}，我今年{{cat.age}}了，我是{{cat.desc}}哦</p>
    </div>
    <div style="width:600px;border: 1px solid cornflowerblue;margin-top: 5px;">
        <h3>第五题</h3>
        <input type="text" v-model="user1"><br/>
        <input type="text" v-model="password1"><br>
        <button onclick="" @click="check">登录</button>
    </div>

</div>

<script>
    var vm=new Vue({
        el: "#app",
        data: {
            msg: 'lahbfvlahblvjabvl',
            cat: {
                name: '罗小黑',
                age: '18',
                desc: '一只黑色的猫',
            },
            yonghu:{
                user: 'admin',
                password: '123',
            },
            user1: '',
            password1: '',

        },

        methods: {
            check() {
                if (this.user1 == this.yonghu.user && this.password1 == this.yonghu.password) {
                    alert('登录成功');
                }
                else {
                    alert('登陆失败');
                }
            }
        }
    });
</script>
</body>
</html>

截图

在这里插入图片描述