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>
