Vue指令03——v-bind和v-forv-bind命令 效果：更改元素属性，如 src、title、href 格式：v-bind：属性=”变量“ 格式：：属性=”变量“ 修改行类样式1 !--绑定样式--div id="app" !-- 绑定样式属性值
效果：更改元素属性，如 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>
作用：自动添加元素
格式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>