初识Vue(4)——v-bind详细

最新推荐文章于 2024-07-05 11:27:33 发布

源魔方

最新推荐文章于 2024-07-05 11:27:33 发布

阅读量317

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/qq_45149720/article/details/108652591

版权

vue 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

v-bind原由

网页中的属性并不是全部都是写死的，有时候需要动态获取来确定。比如一个网站首页用轮播图来展示，每隔一段时间会更换一组图片，如果是属性src是写死的，那么每次更换图片都需要去改源码就很麻烦。所以我们采用变量去代替固定属性值，只需要每次把图片放到数据库，变量指向数据库的图片就行了。v-bind就是解析这个变量的指令。

v-bind介绍

作用：动态绑定属性（比如动态绑定a元素的href属性；img元素的src属性等）
缩写（语法糖形式）：：
预期：any(with arcgument任意参数)|Object(without arcgument对象)
参数：attrOrProp(optional)

基本使用

先把服务器请求来的数据放在data里面，然后用v-bind指令去读取data里面的数据。

<body>
<div id="app">
  //语法糖写法
  <img :src="imgURL" alt="">
  <a :href="aHref">百度一下</a>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      imgURL: '图片地址',
      aHref: 'http://www.baidu.com'
    }
  })
</script>
</body>

v-bind绑定（对象语法和数组语法）

对于属性的绑定，有时候并不是单一的绑定一个属性，可能是多个属性同时有，网页在渲染的时候在由实际情况来决定渲染哪一个。比如这里我们给h2设置两个颜色不同的属性，分别为active和line，需要实现点击h2，切换绑定的属性到达点击切换颜色的目的。

对象语法：

  <style>
    .active {
      color: red;
    }
    .line {
        color: aqua;
    }
  </style>
<body>
<div id="app">
  <!--<h2 v-bind:class="{key1: value1, key2: value2}">{{message}}</h2>-->
  <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: true
    },
    methods: {
      btnClick: function () {
        this.isActive = !this.isActive
      },
      getClasses: function () {
        return {active: this.isActive, line: this.isLine}
      }
    }
  })
</script>
</body>

数组语法：

<body>
<div id="app">
  <h2 class="title" :class="[active, line]">{{message}}
</div>

<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      active: 'active',
      line: 'line'
    }
  })
</script>
</body>