v-bind——Class 与 Style 绑定

最新推荐文章于 2024-06-20 10:43:02 发布

°PJ想做前端攻城狮

最新推荐文章于 2024-06-20 10:43:02 发布

阅读量1k

点赞数 2

分类专栏：前端 # JS # Vue 从0到1 文章标签： vue vue.js 动态绑定样式绑定

本文链接：https://blog.csdn.net/weixin_43745075/article/details/115051435

版权

前端同时被 3 个专栏收录

48 篇文章 1 订阅

订阅专栏

38 篇文章 1 订阅

订阅专栏

Vue 从0到1

23 篇文章 4 订阅

订阅专栏

前言

本篇记录一下的v-bind指令，从简单使用到复杂应用。

简述

v-bind 主要用于动态地属性绑定，比方你的class属性，style属性，value属性，href属性等等，只要是属性，就可以用v-bind指令进行绑定.

简单使用

<div id="app">
    //错误写法
  <img src="{{imgURL}}" alt="">
    
    //正确写法
  <img v-bind:src="imgURL" alt="">
  <a v-bind:href="aHref">v-bind的基本使用</a>
<!--  语法糖，动态绑定简写-->
  <img :src="imgURL" alt="">
  <a :href="aHref">v-bind的基本使用</a>
</div>
<script>
  const app = new Vue({
    el:"#app",
    data:{
      message:"Hello Ting,I am Key!",
      imgURL:"https:www.baidu.com",
      aHref:"https://blog.csdn.net/weixin_43745075?spm=1001.2101.3001.5343"
    }
  })
</script>

绑定class

1.绑定方式：对象语法

对象语法的含义是：class后面跟的是一个对象

2.用法：

1.直接通过{ }绑定一个类，isActive是一个boolean值
<h2 :class="{'active':isActive}">Hello Ting, I am Key!</h2>

2.通过判断，传入多个值
<h2 :class="{'active':isActive,'family':isFamily}">Hello Ting, I am Key!</h2>

3.和普通的类同时存在，并不冲突
注：如果isActive和isFamily都为true，那么会有size/active/family三个类
<h2 class="size" :class="{'active':isActive,'family':isFamily}">Hello Ting, I am Key!</h2>

4.如果过于复杂，可以放在一个methods或者computed中. 
注意：classes是一个计算属性或者一个function
<h2 class="size" :class="classes">Hello Ting, I am Key!</h2>

绑定style

1.绑定方式：对象语法

对象语法的含义是：style后面跟的是一个对象

2.用法：

<div id="app">
<!--  <h2 v-bind:style="{key(属性名):value(属性值)}">{{message}}</h2>-->
<!--  <h2 :style="{fontSize:'50px'}">{{message}}</h2>-->
<!--  <h2 :style="{fontSize:finalSize+'px',color:finalColor,background:finalBackgroundColor}">{{message}}</h2>-->
  <h2 :style="getStyles()">{{message}}</h2>
</div>
<script>
  const app = new Vue({
    el:"#app",
    data:{
      message:"Hello Ting,I am Key!",
      finalSize:100,
      finalColor:"red",
      finalBackgroundColor:"pink"
    },
    methods:{
      getStyles(){
        return {fontSize:this.finalSize+'px',color:this.finalColor,background:this.finalBackgroundColor}
      }
    }
  })
</script>

对于对象语法注意事项

属性名一般采用驼峰命名法，属性值可以来源于data项，也可以是自己设置的固定值，
不建议直接在DOM中写对象，因为不容易维护，可以将样式对象写在data项中或者是计算属性中

小应用案例

需求：点击列表中的哪一项，那么该项的文字就变成红色

预期效果

在这里插入图片描述

源码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .red {
        color: red;
    }
</style>

<body>
    <div id="app">
        <ul>
            <li v-for="(item,index) in da" :class="{'red': index===currentIndex}" v-on:click="change(index)">
                {{item}}
            </li>
        </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                da: ['大哥', '二哥', '三哥'],
                currentIndex:0
            },
            methods: {
                change(i) {
                   this.currentIndex=i;
                }
            }
        })
    </script>

</body>

</html>

°PJ想做前端攻城狮

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
4
评论
v-bind——Class 与 Style 绑定

前言本篇记录一下的v-bind指令，从简单使用到复杂应用。简述v-bind 主要用于动态地属性绑定，比方你的class属性，style属性，value属性，href属性等等，只要是属性，就可以用v-bind指令进行绑定.简单使用<div id="app"> //错误写法 <img src="{{imgURL}}" alt=""> //正确写法 <img v-bind:src="imgURL" alt=""> <
复制链接

扫一扫