周四作业

最新推荐文章于 2024-01-11 20:00:09 发布

Sunʸʸʸ

最新推荐文章于 2024-01-11 20:00:09 发布

阅读量67

点赞数

本文链接：https://blog.csdn.net/weixin_45605868/article/details/101167793

版权

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>

Sunʸʸʸ

关注

0
点赞
踩
0

收藏

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

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

扫一扫