2019.11.6早上vue听写_vue 英语单词听写-CSDN博客

本文链接：https://blog.csdn.net/weixin_45841960/article/details/102939507

2019.11.6早上vue听写

听写内容

听写内容

1.手写一个vue页面，将data中的msg显示在页面中，用插值表达式和v-text和v-html三种方式。
2.v-for可以遍历那些值？遍历它们的语法分别是什么？
3.强变量类型和弱变量类型语言的差异性是什么？
4.将M中数据设置给标签的class属性的方式有几种？请分别写出一个案例。
5.将M中数据设置给标签的style属性的方式有几种？请分别写出一个案例。

听写1：写一个vue页面，显示data中的msg（插值表达式和v-text和v-html三种方式）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
		    <p>姓名：{{msg}}</p>
		    <p v-text="msg">a</p>
		    <p v-html="msg">b</p>
		</div>
		<script>
		    var vm = new Vue({
		        el: "#app",
		        data: {
		            msg: "张三"
		        }
		    });
		</script>
	</body>
</html>

听写2：v-for可以遍历的值及语法

v-for语法可以遍历数组，普通数字和对象（一个参数必是值，两个参数必是值和键，三个参数必是值和键和下标）
数组：v-for=“value in arr”
v-for=” (value, index) in arr”
数字：v-for=“i in n”
对象：v-for=” value in obj (value, key) in obj”
v-for="(value, key, index) in obj”

听写3：强变量类型和弱变量类型语言的差异性

弱变量类型语言的数据类型可以被忽略，一个变量可以赋不同数据类型的值；
强变量类型一旦一个变量被指定了某个数据类型，如果不经过强制转换，那么它就永远是这个数据类型了

听写4：将M中数据设置给标签的class属性的方式和案例

方式1、单个值设置给标签
方式2、对象式设置
方式3、简单数组设置
方式4、对象数组设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*通过类的组合实现复合样式*/
        .cred {
            color: red;
        }
		.w100 {
            width: 100px;
        }
         .byellow {
            background-color: yellow;
        }
    </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 :class="democ">democ测试</div>
</div>
<script src="js/vue.js"></script>
<script>
    var obj = [
        {
            a1: false,
            a2: true,
            a3: false,
            a4: true,
        },
        {
            a1: true,
            a3: true,
        },
        'a5'
    ]
    var vm = new Vue({
        el: '#app',
        data: {
            /*方式1、单个值设置给标签*/
            c1: 'cred',
            /*方式2、对象式设置*/
            cObj: {
                cred: true,
                w100: true,
                byellow: true
            },
            /*方式3、简单数组设置*/
            cSimpleArray: ['cred', 'w100', 'byellow'],
            /*方式4、对象数组设置*/
            cObjArray: [{cred: true}, {byellow: false}, 'w100'],
            democ: obj,
        },
        methods: {}
    });
</script>
</body>
</html>

听写5：将M中数据设置给标签的style属性的方式和案例

方式1、将对象属性对应的样式值设置给标签
方式2、将数组中对象中css样式设置给标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <p :style="styleObj">打字</p>
</div>
<script src="js/vue.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            // 方式1、将对象属性对应的样式值设置给标签
            styleObj: {
                'color': 'red',
                'font-size': '60px',
            },
            // 方式2、将数组中对象中css样式设置给标签
            styleObjArray: [
                {'color': 'red'},
                {'font-size': '60px'}
            ]
        },
        methods: {}
    });
</script>
</body>
</html>