Vue中如何结合使用v-bind和v-for指令？
- 内容介绍
- 文章标签
- 相关推荐
本文共计632个文字，预计阅读时间需要3分钟。
Vue指令v-bind和v-for的简单介绍：
v-bind指令用于绑定HTML元素的属性，如src、title、href等。通过v-bind指令，可以动态地修改这些属性值。
v-for指令用于遍历数组或对象，生成循环渲染的HTML结构。
示例代码：
{{ item }}
其中：
- `v-bind:src=imageSrc`：绑定图片的src属性到变量imageSrc。- `v-bind:title=imageTitle`：绑定图片的title属性到变量imageTitle。- `v-for=item in items`：遍历数组items，生成每个元素的li标签。
Vue指令03——v-bind和v-for v-bind命令效果：更改元素属性，如 src、title、href
格式：v-bind：属性=”变量“
格式：：属性=”变量“
<!--绑定样式-->
<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>
本文共计632个文字，预计阅读时间需要3分钟。
Vue指令v-bind和v-for的简单介绍：
v-bind指令用于绑定HTML元素的属性，如src、title、href等。通过v-bind指令，可以动态地修改这些属性值。
v-for指令用于遍历数组或对象，生成循环渲染的HTML结构。
示例代码：
{{ item }}
其中：
- `v-bind:src=imageSrc`：绑定图片的src属性到变量imageSrc。- `v-bind:title=imageTitle`：绑定图片的title属性到变量imageTitle。- `v-for=item in items`：遍历数组items，生成每个元素的li标签。
Vue指令03——v-bind和v-for v-bind命令效果：更改元素属性，如 src、title、href
格式：v-bind：属性=”变量“
格式：：属性=”变量“
<!--绑定样式-->
<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>