作业2

最新推荐文章于 2024-06-21 19:20:27 发布

weixin_43968515

最新推荐文章于 2024-06-21 19:20:27 发布

阅读量97

点赞数

本文链接：https://blog.csdn.net/weixin_43968515/article/details/102928131

版权

一
1.单个值
v-for="a in … (单个数据)
2.键与值
v-for=(a,b) in …（数组）
3.值和下标
v-for=(a,b) in …（单个数据）
4.键与值和下标
v-for=(a,b) in …（数组）
二
v-bind 单项绑定输入值是无效的
v-model 双项绑定会读入输入的值
三
v-if注释源码
v–show使标签隐藏像为代码加上dispaly:none
四

1
(直接在css中设置)
<style>
.m{
	width:100px;
	color:red;
	background-color:yellow;
}
</style>



2.
<style>
.a{
	width:100px;
}
.b{
	color:red;
}
.c{
	background-color:yellow;
}
</style>
......
<div id="app">
	<div :class="m">......</div>
</div>
......
<script>
var vm = new Vue({
	el: '#app',
		data:{
				m:{
					a:true,
					b:true,
					c:true,
				},
			},
		})
</script>


3.
<style>
.a{
	width:100px;
}
.b{
	color:red;
}
.c{
	background-color:yellow;
}
</style>
......
<div id="app">
	<div :class="m">......</div>
</div>
......
<script>
var vm = new Vue({
	el: '#app',
		data:{
			m:['a','b','c']
			},
		})
</script>

4
<style>
.a{
	width:100px;
}
.b{
	color:red;
}
.c{
	background-color:yellow;
}
</style>
......
<div id="app">
	<div :class="m">......</div>
</div>
......
<script>
var vm = new Vue({
	el: '#app',
		data:{
			m:[{a:true},{b:true},{c:true}]
			},
		})
</script>

5
(3.4混合)
<style>
.a{
	width:100px;
}
.b{
	color:red;
}
.c{
	background-color:yellow;
}
</style>
......
<div id="app">
	<div :class="m">......</div>
</div>
......
<script>
var vm = new Vue({
	el: '#app',
		data:{
			m:[{a:true},'b',{c:true}]
			},
		})
</script>