Vue指令03——v-bind和v-for的使用
Posted 永恒之月TEL
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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:>
<!-- 绑定样式对象 -->
<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
以上是关于Vue指令03——v-bind和v-for的使用的主要内容，如果未能解决你的问题，请参考以下文章
在 vue.js（和 webpack）中结合 v-bind 和 v-for 忽略 v-bind
Vue.js常用指令汇总（v-if//v-show//v-else//v-for//v-bind//v-on等）
前端Vue框架 02 斗篷指令：v-cloak, 指令: 属性指令：v-bind, 表单指令：v-model, 条件指令：v-show v-if, 循环指令：v-for