day02作业

最新推荐文章于 2024-05-16 20:17:32 发布

jiayouma123

最新推荐文章于 2024-05-16 20:17:32 发布

阅读量119

点赞数

文章标签： 02作业

本文链接：https://blog.csdn.net/jiayouma123/article/details/102925686

版权

1、vue的v-for语法可以遍历那些值，分别写出遍历不同值的代码。
答：v-for可以遍历数组、普通数字和对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="./js/vue.js"></script>
	</head>
	<body>
	<div id="app">
		<!-- v-for迭代数组 -->
		<p v-for="str in array" v-text="'姓名'+str"></p>
		<p v-for="(str,index) in array">姓名：{{str}}--下标{{index}}</p>
		<!-- v-for迭代普通数字 -->
		<p v-for="i in 10">
			数字：{{i}}
		</p>
		<!-- 迭代对象 -->
		<!-- v-for一个参数值 -->
		<!-- v-for两个参数值、键 -->
		<!-- v-for一个参数值 、键、下标-->
		<p v-for="(value,key,i) in hero">
			<span>{{i}}</span>
			<span>{{key}}</span>
			<span>{{value}}</span>
		</p>
	<!-- <p>{{array[0]}}</p>
	<p>{{array[1]}}</p> -->
	</div>
	<script>
	var vm=new Vue({
		el:"#app",
		data:{
		   array:['dfjdhf','ddcd','dssg','dss'],
		   hero:{
			  'name':'mayinxin',
			  'sex':'女',
			  'age':19,
		   }
			},
		methods:{}
			});
   </script>
</body>
</html>

2、文字叙述v-model和v-bind的差别。
答：
v-bind 的绑定是一种单向的绑定，只能将M中的数据绑定到标签内属性上，但标签内属性的改变无法体现到M中。v-model 的绑定是一种双向的绑定，将M中的数据绑定到标签内属性上，标签内属性的改变可以体现到M中。
3、文字描述一下v-show和v-if的差别。
答：v-if是将其从源代码中移除使其标签消失，v-show是用display:none;代码使其隐藏。
4、将M中数据设置为标签的类有几种方式？就每种方式写出样例代码。
答：4种，方式1：单个值设置，方式2：对象式设置，方式3：简单数组设置，方式4：复杂数组,对象数组设置。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<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>
	<script src="./js/vue.js"></script>
	<script>
		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'],
				},
				methods:{
					}});
	</script>
</body>
</html>