第三周4,5作业

最新推荐文章于 2022-04-25 16:45:59 发布

wxm-baby

最新推荐文章于 2022-04-25 16:45:59 发布

阅读量165

点赞数

分类专栏： week3day0304

本文链接：https://blog.csdn.net/a_tiny_tot/article/details/101116801

版权

week3day0304 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

周四：

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<!--    <p>{{cat.name}}</p>-->
<!--    <p>{{cat.age}}</p>-->
<!--    <p>{{cat.desc}}</p>-->

   插值表达式： <p>{{msg}}</p>
   v-text： <p v-text="msg"></p>
   v-html： <p v-html="msg"></p>
</div>

<script>
    var vm =new Vue({
        el:'#app',
        data:{
            msg:'<h2>什么才是你内心最想要的？</h2>',
            // cat:{
            //     name:'罗小黑',
            //     age:18,
            //     desc:'是一只黑色的猫'
            // }
        }
    })
</script>
</body>
</html>

结果：

在这里插入图片描述

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="js/vue.js"></script>
</head>
<body>
<div id="app">
    <p>{{cat.name}}</p>
    <p>{{cat.age}}</p>
    <p>{{cat.desc}}</p>

<!--   插值表达式： <p>{{msg}}</p>-->
<!--   v-text： <p v-text="msg"></p>-->
<!--   v-html： <p v-html="msg"></p>-->
</div>

<script>
    var vm =new Vue({
        el:'#app',
        data:{
            // msg:'<h2>什么才是你内心最想要的？</h2>',
            cat:{
                name:'罗小黑',
                age:18,
                desc:'是一只黑色的猫'
            }
        }
    })
</script>
</body>
</html>

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录校验</title>
    <script src="js/vue.js"></script>
</head>
<body>
 <div id="app">
     用户名：<input type="text" v-model="name"><br>
     密  码：<input type="text" v-model="password"><br>
     <button @click="lo">登录</button>
 </div>


 <script>
         var vm =new Vue({
         el:'#app',
         data:{
             name:"",
             password:"",
         },
         methods:{
             lo() {
                 if(this.name == "" || this.password == ""){
                     alert('请输入用户名或者密码');
                 }else{
                     alert('登录成功');
                 }
             }
         }
     })
 </script>
</body>
</html>

周五：

1.说说几个常用的字符操作函数filter、some的差别
filter： 将这个数组中符合条件的元素全部输出
some： 判断指定数组中是否存在符合条件的元素，存在则输出true，不存在则为false。

2.indexOf和includes的差别
indexOf： indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。如果没有找到匹配的字符串则返回 -1。
includes： includes() 方法用于判断字符串是否包含指定的子字符串。如果找到匹配的字符串则返回 true，否则返回 false。

3.谈谈你对v-on的理解
可以使用v-on来将vm中定义的方法与标签的事件进行绑定
v-on 可以接收一个定义的方法来调用。
除了直接绑定到一个方法，也可以用内联 JavaScript 语句

4. @click="del(index)"和@click="del("index")"的差别是什么
@click="del(index)": 删除当前选中的
@click="del("index")": 不管选中哪个，都按照下标顺序删除

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

<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()

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第三周星期五作业</title>
    <script src="js/vue.js"></script>

</head>
<body>
<div id="app">
<!--    <div onclick="m11()" @click.capture="m12()">-->
<!--        <div onclick="m21()" @click.capture="m22()">-->
<!--            <button onclick="m31()" @click="m32()">一个按钮</button>-->
<!--        </div>-->
<!--    </div>-->

    <p>你珍惜了那个对你好的人了吗？</p>
    <p v-color="color">你珍惜了那个对你好的人了吗？</p>
</div>


<script>

    Vue.directive("color",(el,{modifiers,value})=>{
          value = value || '#ff0000';
          el.style.color = value;
    })
    // function m11() {
    //     alert("m11");
    // }
    // function m21() {
    //     alert("m21");
    // }
    // function m31() {
    //     alert("m31");
    // }
    var vm = new Vue({
        el:"#app",
        msg:'颜色会变红' ,
        // methods:{
        //     // m12() {
        //     //     alert("m12");
        //     // },
        //     // m22() {
        //     //     alert("m22");
        //     // },
        //     // m32() {
        //     //     alert("m32");
        //     // }
        // }
    })
</script>
</body>
</html>

wxm-baby

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第三周4,5作业

周四：1.总结一下v-text和v-html和插值表达式的差别v-text: 写在标签属性中，会覆盖标签中其他内容，且只能将数据以文本发式显示。v-html: 写在标签属性中，会覆盖标签中其他内容，可以将数据以HTML数据显示以代码形式显示。插值表达式：写在标签内容中，不会覆盖标签中其他内容，而只是将其引用的数据显示在插值表达式占据的区域。2.完成创建一个vue对象并和id是app的d...
复制链接

扫一扫