11.05作业tian

最新推荐文章于 2022-11-06 21:58:56 发布

weixin_45839691

最新推荐文章于 2022-11-06 21:58:56 发布

阅读量61

点赞数

本文链接：https://blog.csdn.net/weixin_45839691/article/details/102926434

版权

 1、vue的v-for语法可以遍历那些值，分别写出遍历不同值的代码。

		<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="app">
	<p v-for=" i in 5">{{i}}</p>
	<p v-for=" （x,index） in  sz">{{x}}  {{index}}</p>
	<p v-for=" （value,key,id） in obj">{{value}  {{key}}   		   {{id]}</p>
   
</div>
<script src="js/vue.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            sz: ['a', 'b', 'c', 'd'],
            obj: {
                'name': '田',
                'sex': '男',
                'age': '3',
            }
        }
    });
</script>

</body>
</html>

 2、文字叙述v-model和v-bind的差别
 v-mode数据传输为双向
 v-bind仅能读如数据

3、文字描述一下v-show和v-if的差别。
 v-if为创建删除
 v-show为显示隐藏

 4、将M中数据设置为标签的类有几种方式？就每种方式写出样例代码。

		<!DOCTYPE html>
<html lang="en">
<head>文字描述一下v-show和v-if的差别。
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        .color {
            color: red;
        }
        .bgc{
            background-color: #ff00ff;
        }


    </style>
</head>
<body>
<div id="app">
    <div :class="c1">c1测试</div>
    <div :class="cObj">cObj测试</div>
    <div :class="cSimpleArray">cSimpleArray测试</div>
    <div :class="cObjArray">cObjArray测试</div>

</div>
<script src="js/vue.js"></script>
<script>

    var vm = new Vue({
        el: '#app',
        data: {

            c1: 'bgc',

            cObj: {
                color: true

            },
            cSimpleArray: ['bgc', 'color'],
            cObjArray: [{bgc: false},'color']

        },
        methods: {}
    });


</script>
</body>
</html>

weixin_45839691

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
11.05作业tian

1、vue的v-for语法可以遍历那些值，分别写出遍历不同值的代码。 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title></head><body><div...
复制链接

扫一扫