3-day04作业

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>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>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值