0919-20作业

weixin_43928990

于 2019-09-22 21:07:51 发布

阅读量88

点赞数

本文链接：https://blog.csdn.net/weixin_43928990/article/details/101172605

版权

DAY4作业

<!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>

DAY5作业
第一题：说说几个常用的字符操作函数filter、some的差别
some() 方法用于检测数组中的元素是否满足指定条件（函数提供）。 some() 方法会依次执行数组的每个元素：
如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。如果没有满足条件的元素，则返回false。
注意： some() 不会对空数组进行检测。some() 不会改变原始数组

filter用于把Array的某些元素过滤掉，然后返回剩下的元素,
filter()把传入的函数依次作用于每个元素，然后根据返回值是true还是false决定保留还是丢弃该元素,
filter会根据函数中的筛选条件将返回的结果组成一个新的数组并返回

第二题：indexOf和includes的差别
数组中的比较：看函数的返回值：indexOf返回的是数值型的而includes返回的是布尔型的
都可以支持第二参数，而且的第二个参数都支持负数形式
数组中的indexOf不能判断数组中是否有NaN而includes可以

第三题：谈谈你对v-on的理解
监听子组件触发的事件

第四题：@click=“del(index)”和@click=“del(“index”)”`的差别是什么
'@click=“del(index)”'是删除对应的数据
'@click=“del(“index”)” '应该是删除index

第五题下列代码六个函数的执行顺序是什么
点击按钮：m12➡m22➡m32
点击按钮之外的div框中：m12➡m22

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

<div id="one">
	<p v-color="'red'">{{yanse}}</p>
</div>
<script>
    var vm=new Vue({
            el:"#one",
        data:{
              yanse:'红色',
        },
            directives:{
                'color':{
                    bind:function (el,binding) {
                        el.style.color=binding.value;
                    }
                }
            }
        })
</script>

weixin_43928990

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
0919-20作业

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

扫一扫