作业周四

最新推荐文章于 2022-10-23 17:56:58 发布

weixin_45605801

最新推荐文章于 2022-10-23 17:56:58 发布

阅读量116

点赞数

文章标签：作业

本文链接：https://blog.csdn.net/weixin_45605801/article/details/101153806

版权

1、总结一下v-text和v-html和插值表达式的差别
（1）插值表达式写在标签内容中，不会覆盖标签中其他内容，而只是将其引用的数据显示在插值表达式占据的区域。
（2） v-text写在标签属性中，会覆盖标签中其他内容，且只能将数据以文本方式显示。
（3） v-text写在标签属性中，会覆盖标签中其他内容，和v-text不同，v-html可以将数据以html数据以代码形式显示。

2、完成创建一个vue对象并和id是app的div进行绑定，然后在该div中分别用插值表达式、v-text、v-html获取到vm下data中的msg的值

<body>
<div id="app">
    <p>{{msg}}</p>
    <p v-text="msg"></p>
    <p v-html="msg">    
</div>
<script src="js/vue.js"></script>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            msg:'我是msg之中的内容',
        }
    });
</script>
</body>

3、什么是MVVM模式，这样设计有什么优点
mvvm即Model-View-ViewModel，mvvm的设计原理是基于mvc的，所以说mvvm不算是一种创新，充其量是一种改造，这其中的ViewModel便是一个小小的创新.
可以将ViewMode看作是Model和View的连接桥，View可以通过事件绑定Model，Model可以通过数据绑定View，通过ViewMode可以实现数据和视图的完全分离。
优点：1. 低耦合 2. 可重用性 3. 独立开发 4. 可测试
4、使用vue将下列data中cat记录显示插入到页面之中

<body>
<div id="app">
    <p>{{cat.name}}</p>
    <p>{{cat.age}}</p>
    <p>{{cat.desc}}</p>
</div>
<script src="js/vue.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data:{
            cat:{
                name: '罗小黑',
                age: 18,
                desc: '是一只黑色的猫'
            }
        },
    });
</script>
</body>

5、使用vue，完成一个登陆校验功能。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <div>
用户: <input type="text" v-model=" yonghu"><br>
密码: <input type="text"  v-model=" mima"><br>
<button @click="dengru">登录</button>
    </div>
</div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            users:{
                yonghu: 'admin',
                mima: '123456',
            },
            yonghu:'',
            mima:'',
        },
        methods:{
            dengru(){
                    if(this.yonghu==this.users.yonghu&&this.mima==this.users.mima)
                    {alert('登录成功');
                    }
                    else  {alert('登录失败');
                    }
            }
        }
    });
</script>
</body>
</html>

weixin_45605801

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
作业周四

1、总结一下v-text和v-html和插值表达式的差别（1）插值表达式写在标签内容中，不会覆盖标签中其他内容，而只是将其引用的数据显示在插值表达式占据的区域。（2） v-text写在标签属性中，会覆盖标签中其他内容，且只能将数据以文本方式显示。（3） v-text写在标签属性中，会覆盖标签中其他内容，和v-text不同，v-html可以将数据以html数据以代码形式显示。2、完成创建...
复制链接

扫一扫