实训DAY02work

QIJIEJIU

于 2019-11-05 22:28:40 发布

阅读量133

点赞数

文章标签：作业02

本文链接：https://blog.csdn.net/QIJIEJIU/article/details/102925386

版权

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

	<body>
		<div id="app">
		<!-- 1.v-for迭代数组 -->
			<p v-for="(item,index) in array" >表情:{{item}}==次位:{{index}}</p>
			<!-- 2.v-for迭代普通数字,比如v-for="i in n"表示迭代数组[1,2,...,n] -->
			<p v-for="i in 10">数字L{{i}}</p>
			<!-- 3.v-for迭代对象 -->
			<!-- 一个参数必是值 -->
			<!-- 两个参数必是值和键 -->
			<!-- 三个参数必是值和键和下标 -->
			<p v-for="(value,key,i) in jpg">
				<span>{{i}}</span>
				<span>{{key}}</span>
				<span>{{value}}</span>
			</p>
		</div>
		<script >
		var vm=new Vue({
				el: '#app',
				data: {
					array:['(嚣张.jpg)','(滑稽.jpg)','(嫌弃.jpg)','(委屈.jpg)','(开心.jpg)'],
					jpg:{
						'name':'hh',
						'sex':'不详',
						'sticker':'滑稽.jpg',
					}
				},
				methods: {
					
				}
			});
		</script>

2、文字叙述v-model和v-bind的差别。

v-bind的绑定是一种单向的绑定，即只能将data中的数据绑定到标签内属性上，即data改变标签内属性值也会改变，但标签内属性的变化无法体现到data中
v-model改变的流程
2.1.v-model对应标签的value属性变化导致vm对象变化
2.2.vm对象变化导致引用了vm对象值的v-bind对应标签的value的值变化

3、文字描述一下v-show和v-if的差别。

v-if是通过将其从源代码中移除的方法来使标签消失
v-show是通过设置display:none;的方式使标签隐藏

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
		<style>
			.cred{
				color: red;
			}
			.w100{
				width: 140px;
			}
			.byellow{
				background-color: yellow;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div :class="c1">还行吧(嫌弃.jpg)</div>
			<div :class="c0bg">试试吧(小心.jpg)</div>
			<div :class="cSimpleArray">狗狗祟祟(观望.jpg)</div>
			<div :class="c0bjArray">随他去吧(悠闲.jpg)</div>
			<div :class="democ">诶诶诶(滑稽.jpg)</div>
		</div>
		<script >
			var vm=new Vue({
				el: '#app',
				data: {
					/*方式1.单个值设给标签*/
					c1: 'cred',
					/*方式2.对象式设置*/
					c0bg:{
						cred: false,
						w100: true,
						byellow: true,
					},
					/*方法3.简单数组设置*/
					cSimpleArray:['cred','w100','byellow'],
					/*方式4.对象数组设置*/
					c0bjArray: [{cred: true},{w100: true},{byellow: true}],
					democ: obj,
				},
				methods: {
					
				}
			});
			var obj=[
				{
					a1:false,
					a2:true,
					a3:false,
					a4:true,
				},{
					a1:true,
					a3:true,
				},
				'a5'
			];
		</script>
	</body>
</html>

QIJIEJIU

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
实训DAY02work

1、vue的v-for语法可以遍历那些值，分别写出遍历不同值的代码。 <body> <div id="app">  <p v-for="(item,index) in array" >表情:{{item}}==次位:{{index}}</p> <!-- 2.v-for迭代...
复制链接

扫一扫