vue中v-bind常见用法及综合案例：class点击切换

Jolly_zhang

已于 2023-11-07 14:08:41 修改

阅读量1.4k

点赞数

分类专栏： Vue2 文章标签： vue.js 前端 javascript es6

于 2023-11-07 10:33:40 首次发布

本文链接：https://blog.csdn.net/Jolly_zhang/article/details/134250885

版权

Vue2 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

文章目录

一、v-bind介绍
二、v-bind语法
- 示例一
三、综合案例点击切换图片

一、v-bind介绍

v-bind就是用于绑定数据和元素属性的；
比如：

动态绑定a元素的href属性；
动态绑定img元素的src属性；
动态绑定css样式；
…

二、v-bind语法

语法：v-bind:属性名=“表达式”
简写：:属性名=“表达式”

v-bind动态绑定class(对象方法)

<div class='box' v-bind:class='{类名1：布尔值，类名2：布尔值}'></div>

字体颜色生效，背景颜色不生效

<template>
  <div>
    <h1 :class="{color:color,bgc:bgc}">标题</h1>
  </div>
</template>

<script>
export default {
  name: 'consult-page',
  data () {
    return {
      color: true,
      bgc: false
    }
  }
}
</script>
<style>
.color{
  color:green
}
.bgc{
  background-color: gray;
}
</style>

也可以直接绑定一个对象

<template>
  <div>
    <h1 :class="classObject">标题</h1>
  </div>
</template>

<script>
export default {
  name: 'consult-page',
  data () {
    return {
      classObject: {
        color: true,
        bgc: true
      }
    }
  }
}
</script>
<style>
.color{
  color:green
}
.bgc{
  background-color: gray;
}
</style>

在这里插入图片描述

v-bind动态绑定class(数组语法)

<div class='box' :class='[类名1，类名2]'></div>

<template>
  <div>
    <h1 :class="['color',{'active':isActive}]">标题</h1>
    <h1 :class="['color']">标题</h1>

  </div>
</template>

<script>
export default {
  name: 'consult-page',
  data () {
    return {
      isActive: true
    }
  }
}
</script>
<style>
.color{
  color:green
}
.active{
  background-color: gray;
}
</style>

在这里插入图片描述

v-bind动态绑定style(对象语法)

<div class='box' :style="{css属性名1：css属性值,css属性名2：css属性值}"

v-bind动态绑定style(数组语法)

<div class='box' :style="[css属性值1,css属性值2]"

示例一

在这里插入图片描述

<template>
  <div>
    <van-button :disabled="disabled" type="primary" size="small" >按钮</van-button>
    <van-button  type="primary" size="small" @click="getSwitch">{{this.disabled?'启用':'禁用'}}</van-button>
  </div>
</template>

<script>
export default {
  name: 'consult-page',
  data () {
    return {
      disabled: true
    }
  },
  methods: {
    getSwitch () {
      this.disabled = !this.disabled
    }
  }
}
</script>

<style>
</style>

三、综合案例点击切换图片

点击圆点，圆点样式变化及圆点上方图片切换显示在下方方框内
在这里插入图片描述

<template>
<div>
  <div class="container">
    <div
    v-for="(item,index) in list"
    :key="item.id"
    class="item"
    >
      <img :src="item.imageUrl" alt="" class="img">
      <div @click="getImg">
        <div class="circular"  @click="activeIndex=index" >
          <div class="bgcColor" :class="{block:activeIndex === index}"></div>
        </div>
      </div>
    </div>
   </div>
    <h3>图片切换</h3>
   <div class="content">

    <img :src="preImg" alt="">
   </div>
  </div>
</template>

<script>
export default {
  name: 'houselist-page',
  data () {
    return {
      list: [
        { id: 1, imageUrl: 'http://124.223.73.204:8080/img/swiper/1.png' },
        { id: 2, imageUrl: 'http://124.223.73.204:8080/img/swiper/2.png' },
        { id: 3, imageUrl: 'http://124.223.73.204:8080/img/swiper/3.png' }
      ],

      activeIndex: 0,
      preImg: 'http://124.223.73.204:8080/img/swiper/1.png'
    }
  },
  methods: {
    getImg () {
      this.preImg = this.list[this.activeIndex].imageUrl
    }
  }

}
</script>

<style>
.container{
  display: flex;
}
.item{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.img{
   width:80px;
   height:80px;
  }
.circular{
    width:20px;
    height:20px;
    border-radius: 50%;
    border:2px solid pink;
    text-align: center;
    line-height:20px;
  }
.bgcColor{
  width:10px;
  height:10px;
  border-radius:50%;
  background-color: pink;
  display: inline-block;
  display: none;
}
.block{
  display: block;
  display: inline-block;
}
.content{
  width:100px;
  height:100px;
  border: 1px solid pink;
  padding:10px;
  margin-top:10px;
}
.content img{
   width:100px;
  height:100px;
}
</style>