目录
扫描二维码关注公众号，回复：
14773852 查看本文章
v-once、v-html、v-text、v-clock 用法见 http://t.csdn.cn/Mtc5r （前一篇文章详解）
一、v-for数组或对象中的每一个值
1.数组
in/of 数组或对象本身
<div id="app">
<h2 v-for="item in todolists">{
{item}}</h2>
<h2 v-for="item of todolists">{
{item}}</h2>
</div>
<script>
const vm = new Vue({
el: '#app',
data() {
return {
todolists: ['篮球', '排球', '羽毛球', '足球'],
}
}
})
</script>输出结果都是一样的。
2.对象
<div id="app">
<h2 v-for="item in obj">{
{item}}</h2>
<h2 v-for="item of obj">{
{item}}</h2>
</div>
<script>
const vm = new Vue({
el: '#app',
data() {
return {
obj: {
a: '张三',
b: '李四',
c: '王五'
}
}
}
})
</script>结果也是一样的。
二、v-bind动态绑定
1.v-bind指令
<div id="app">
<img :src="src" />
<img :src="url" />
</div>
<script>
const vm = new Vue({
el:'#app',
data(){
return {
src:'https://cn.bing.com/th?id=OIP.NaSKiHPRcquisK2EehUI3gHaE8&pid=Api&rs=1',
url:'img/img.png' //本地图片路劲 没有添加
}
}
})
</script>
2.v-bind绑定对象
<style>
.active {
color:#f00; //修改字体样式
}
</style>
</head>
<body>
<div id="app">
<h2 :class="changeActive()" @click="change">{
{msg}}</h2> //点击事件
</div>
<script>
const vm = new Vue({
el:'#app',
data(){
return {
msg:'动态绑定对象',
isactive:false 、//点击前状态未变色
}
},
methods:{
change(){
this.isactive = !this.isactive //点击后通过反向变为真 变色
},
changeActive(){
return {active:this.isactive}
}
}
})点击前 点击后
3.v-bind和v-fo结合（案例）
点文字变色
<style>
.active {
color: red; //创建变色样式
}
</style>
</head>
<body>
<div id="app">
<ul>
<li v-for="(item,index) in movies" :key="index" //通过v-for获取数组元素及索引
@click="change(index)" //为点击添加索引，点击时输出点击索引
:class="aindex==index?'active':''">//通过三元表达式判断状态，为点击事件添加颜色
{
{item}}</li>
</ul>
</div>
<script src="../../练习/js/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
aindex: 0,
movies: ['111', '222', '333', '444', '555'],
},
methods: {
change(index) {
this.aindex = index //通过相等判断第几个元素被点击
}
}
})
</script>
4.v-bind动态绑定class数组的用法
<div id="app">
<h2 :class="['active','aaa']">我们正在学习vue</h2>
<h2 :class="[active,aaa]">我们正在学习vue</h2>
<h2 :class="getStyle()">我们正在学习vue</h2>
</div>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script>
const vm = new Vue({
el:'#app',
data(){
return {
active:'isactive',
aaa:'bbb'
}
},
methods:{
getStyle(){
return [this.active,this.aaa]
}
}
})数组中加引号和不加引号有区别
加引号:表示字符串 是固定的,
不加引号:表示变量是不固定的
5.v-bind动态绑定class对象的语法
<div id="app">
<h2 :style="{fontSize:'50px'}">我们爱学习</h2>
<h2 :style="{fontSize:fontsize}">我们爱学习</h2>
<h2 :style="getStyle()">我们爱学习</h2>
</div>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script>
const vm = new Vue({
el:'#app',
data(){
return {
fontsize:40+'px'
}
},
methods:{
getStyle(){
return {fontSize:this.fontsize}
}
}
})
</script>
5.v-bind动态绑定class对象的语法
<div id="app">
<h2 :style="[baseStyle]">我们爱学习</h2>
<h2 :style="['baseStyle']">我们爱学习</h2><!-- 无意义 -->
<h2 :style="getStyle()">我们爱学习</h2>
</div>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script>
const vm = new Vue({
el:'#app',
data(){
return {
baseStyle:{background:'#f00'}
}
},
methods:{
getStyle(){
return [this.baseStyle]
}
}
})