v-bind的基本使用以及动态绑定class

小码哥呀

已于 2022-02-07 16:29:50 修改

阅读量412

点赞数

分类专栏： VUE 文章标签： vue.js 前端

于 2021-10-31 23:02:32 首次发布

本文链接：https://blog.csdn.net/qq_46112274/article/details/121071651

版权

VUE 专栏收录该内容

62 篇文章 9 订阅

订阅专栏

v-bind的基本使用

1、v-bind的基本使用
2、v-bind的语法糖（简写方式）
3、v-bind动态绑定class(对象语法)
4、v-bind动态绑定class(数组语法)

1、v-bind的基本使用

在这里插入图片描述

<div id="app">
  <img v-bind:src="imageURL" alt="">
  <a v-bind:href="aHref">百度一下</a>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
          message:'你好呀',
          imageURL:'https://img10.360buyimg.com/n1/s450x450_jfs/t1/'+
                '133851/6/22705/255495/61fa295bE4ab57943/e6e2c7a275ccb6ae.jpg',
          aHref: 'http://www.baidu.com'
        }
    })
</script>

在这里插入图片描述

2、v-bind的语法糖（简写方式）

在这里插入图片描述

<div id="app">
    <img :src="imageURL" alt="">
    <a :href="aHref">百度一下</a>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
          message:'你好呀',
          imageURL:'https://img13.360buyimg.com/seckillcms/s140x140_jfs/' +
              't1/202808/13/13422/133058/617e3539Ef517623b/6f5f61161bcdc97f.jpg.webp',
          aHref: 'http://www.baidu.com'
        }
    })
</script>

3、v-bind动态绑定class(对象语法)

案例1：

<div id="app">
    <h2 v-bind:class="{active: isActive, line:isLine}">{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
          message:'你好呀',
          isActive: true,
          isLine: false
        }
    })
</script>

在这里插入图片描述
案例2：

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .active{
      color:red
    }
  </style>
</head>
<body>
<div id="app">
    <h2 v-bind:class="{active: isActive, line:isLine}">{{message}}</h2>
    <button v-on:click="btnClick">按钮</button>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
          message:'你好呀',
          isActive: true,
          isLine: false
        },
        methods: {
          btnClick:function(){
            this.isActive = !this.isActive
          }
      }
    })
</script>
</body>

在这里插入图片描述

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

加引号

在这里插入图片描述

不加引号

在这里插入图片描述

放到方法里面

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <!-- 如果加上双引号，则active，line会被绑定到class上 -->
  <!-- <h2 class="title" :class="['active','line']">{{message}}</h2> -->
    <!-- 如果加上双引号，active，line会显示下面data中的值 -->
  <h2 class="title" :class="[active,line]">{{message}}</h2>
  <h2 class="title" :class="getClasses()">{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
          message:'你好呀',
          active: 'aaaaaa',
          line: 'bbbbbb'
        },
        methods: {
          getClasses: function() {
            return [this.active,this.line]
          }
      }
    })
</script>

</body>
</html>

小码哥呀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
v-bind的基本使用以及动态绑定class

1、v-bind的基本使用<div id="app"> <img v-bind:src="imageURL" alt=""> <a v-bind:href="aHref">百度一下</a></div><script src="../js/vue.js"></script><script> const app = new Vue({ el: '#app',
复制链接

扫一扫

专栏目录