Vue指令03——v-bind和v-for的使用
Vue指令03——v-bind和v-for
v-bind命令
效果:更改元素属性,如 src、title、href
格式:v-bind:属性=”变量“
格式::属性=”变量“
修改行类样式1
<!--绑定样式-->
<div id="app">
<!-- 绑定样式属性值 -->
<div v-bind:style="{backgroundColor:pink,width:width,height:height}">
<!-- 绑定样式对象 -->
<div v-bind:style=“myDiv”></div>
</div>
</div>
<script>
var app=new Vue({
el:"#app",
data: {
//变量名:值
pink:'pink',
width:'100%',
height: '200px'
//字典型数据,驼峰写样式
myDiv:{
backgroundColor: 'red',
width: '100px',
height: '100px‘
}
}
})
</script>
<body>
<!--绑定样式-->
<style>
.box1 {
background-color: pink;
width: 500px;
height: 600px;
}
#box2 {
background-color: red;
width: 100px;
height: 100px;
}
.box3 {
margin-top: 20px;
background-color: blue;
width: 100px;
height: 100px;
}
</style>
<div id="app" :class="B1">
<div :id="B2"> </div>
<div :class="B3"> </div>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
B1: "box1",
B2: "box2",
B3: "box3"
}
})
</script>
</body>
v-for命令
作用:自动添加元素
格式1:v-for="变量 in 数组/值"
格式2:v-for="(变量,下标变量) in 数组"
this.数组名.push(数据) //在数组最后添加数据
this.数组名.shift() //删除数组最后的数据
this.数组名.splice(下标,1); //删除数组指定的数据 ,1代表删1条
<div id="acc">
<button @click="add">按钮+</button>
<button @click="rm">按钮—</button>
<ul>
<!--把数组arr的值赋给变量it,index为下标变量-->
<li v-for="(it,index) in arr">{{index}}_{{it}}</li>
<!--把数组vc的值赋值给info-->
<li v-for="info in vc">{{info.name}}</li>
</ul>
</div>
<script>
var info=new Vue({
el:"#acc",
data:{
//数组1
arr:["好运来!","好运离开","痛苦棘手"],
// 数组2,值是对象
vc:[{name:"小明"},{name:"小红"}]
},
methods:{
add:function(){
//push:在数组后添加值
this.vc.push({name:1234})
},
rm:function(){
//shift:从数组左边移出值
this.vc.shift()
}
}
})
</script>
本文来自博客园,作者:永恒之月TEL,转载请注明原文链接:https://www.cnblogs.com/akc4/p/16074327.html