周四周五9.20

最新推荐文章于 2021-09-20 11:29:03 发布

ITyuanhonghong

最新推荐文章于 2021-09-20 11:29:03 发布

阅读量99

点赞数

本文链接：https://blog.csdn.net/ITyuanhonghong/article/details/101171275

版权

`1、总结一下v-text和v-html和插值表达式的差别
v-text和v-html都写在标签属性里
v-text只能以文本方式显示
插值表达式则写在标签内容里，不会覆盖标签内容，将引用的数据显示在他的区域内
2、完成创建一个vue对象并和id是app的div进行绑定，然后在该div中分别用插值表达式、v-text、v-html获取到vm下data中的msg的值
3、什么是MVVM模式，这样设计有什么优点
4、使用vue将下列data中cat记录显示插入到页面之中

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

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

</head>
<body>

<!--<div id="app">-->
<!--    <p v-color="color">经济数据</p>-->
<!--</div>-->
<!--<script>-->
<!--    Vue.directive("color",(el,{modifiers,value})=>{-->
<!--        value = value || '#ff0000';-->
<!--    el.style.color = value;-->
<!--    })-->
<!--    var vm=new Vue({-->
<!--        el:'#app',-->
<!--        msg:'变红'-->
<!--    })-->
<!--</script>-->
<div id="app">
    <p>{{cat.name}}</p>
    <p>{{cat.age}}</p>
    <p>{{cat.desc}}</p>
</div>

<script>
<!--要求插入内容-->
    var vm =new Vue({
        el:'#app',
        data:{
            cat:{
                name:'罗小黑',
                age:18,
                desc:'是一只黑色的猫'
            }
        }
    })
</script>
</body>
</html>

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
    用户名：<input type="text" v-model="name"><br>
    密 码：<input type="text" v-model="password"><br>
    <button @click="deng">登录</button>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            name: "",
            password: ""
        },
        methods: {
            deng() {
                if (this.name == "hongs" || this.password == "123456") {
                    alert('登录成功！');
                } else {
                    alert('请输入用户名或者密码');
                }
            }
        }
    })
</script>
</body>
</html>

Vue作业2019-9-20

说说几个常用的字符操作函数filter、some的差别

some方法返回的是boolean值，可用于检查数组中是否有某对象
filter方法返回的是一个新数组，可用于过滤数组中的对象

indexOf和includes的差别

indexOf返回的是数值型的而includes返回的是布尔型的
数组中的indexOf不能判断数组中是否有NaN而includes可以

谈谈你对v-on的理解

可以监听dom事件，接收一个方法来调用js代码

@click="del(index)"和@click="del("index")"的差别是什么

del(“index”)"按下标顺序删除

下列代码六个函数的执行顺序是什么

<div onclick="m11();" @click.capture="m12()">
	<div onclick="m21();" @click.capture="m22()">
		<button onclick="m31();" @click="m32()">一个按钮</button>
	</div>
</div>

m12() m22() m31() m32() m21() m11()

定义一个私有指令，使加载该指令的标签都拥有红色字体。

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

</head>
<body>

<div id="app">
    <p v-color="color">经济数据</p>
</div>
<script>
    Vue.directive("color",(el,{modifiers,value})=>{
        value = value || '#ff0000';
    el.style.color = value;
    })
    var vm=new Vue({
        el:'#app',
        msg:'变红'
    })
</script>
</body>
</html>

ITyuanhonghong

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
周四周五9.20

`1、总结一下v-text和v-html和插值表达式的差别v-text和v-html都写在标签属性里v-text只能以文本方式显示插值表达式则写在标签内容里，不会覆盖标签内容，将引用的数据显示在他的区域内2、完成创建一个vue对象并和id是app的div进行绑定，然后在该div中分别用插值表达式、v-text、v-html获取到vm下data中的msg的值3、什么是MVVM模式，这样设计...
复制链接

扫一扫