doina

一个小菜鸟运维工程师.

vue v-bind 动态绑定属性

v-bind介绍

操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute,所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可。不过,字符串拼接麻烦且易错。因此,在将v-bind 用于 classstyle 时,Vue.js 做了专门的增强。表达式结果的类型除了字符串之外,还可以是对象或数组。

  • v-bind指令: 作用:动态绑定属性
    • 缩写::
    • 预期:any (with argument) | Object (without argument)
    • 参数:attrOrProp (optional)
  • v-bind可以绑定:
    • 动态绑定a元素的href属性
    • 动态绑定img元素的src属性
    • 动态绑定Class样式
    • 动态绑定Style样式

v-bind用法

v-bind绑定class

对象语法

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

用法一:直接通过{}绑定一个类
<h2 :class="{'active': isActive}">Hello World</h2>

用法二:也可以通过判断,传入多个值
<h2 :class="{'active': isActive, 'line': isLine}">Hello World</h2>

用法三:和普通的类同时存在,并不冲突
注:如果isActive和isLine都为true,那么会有title/active/line三个类
<h2 class="title" :class="{'active': isActive, 'line': isLine}">Hello World</h2>

用法四:如果过于复杂,可以放在一个methods或者computed中
注:classes是一个计算属性
<h2 class="title" :class="classes">Hello World</h2>

数组语法

用法一:直接通过{}绑定一个类
<h2 :class="['active']">Hello World</h2>

用法二:也可以传入多个值
<h2 :class=“[‘active’, 'line']">Hello World</h2>

用法三:和普通的类同时存在,并不冲突
注:会有title/active/line三个类
<h2 class="title" :class=“[‘active’, 'line']">Hello World</h2>

用法四:如果过于复杂,可以放在一个methods或者computed中
注:classes是一个计算属性
<h2 class="title" :class="classes">Hello World</h2>

v-bind绑定style

可以利用v-bind:style来绑定一些CSS内联样式。

在写CSS属性名的时候,比如font-size
– 我们可以使用驼峰式 (camelCase) fontSize
– 或短横线分隔 (kebab-case,记得用单引号括起来) ‘font-size’

对象语法

:style="{color: currentColor, fontSize: fontSize + 'px'}"

style后面跟的是一个对象类型
– 对象的key是CSS属性名称
– 对象的value是具体赋的值,值可以来自于data中的属性

数组语法

<div v-bind:style="[baseStyles, overridingStyles]"></div>

style后面跟的是一个数组类型
多个值以,分割即可

v-bind实例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
      .active {
          color: red;
      }

      .line {
          font-size: 30px;
      }
  </style>
</head>
<body>
<div id="app">
  <!-- 使用v-bind简写, 动态绑定a标签的href属性和img标签的src属性 -->
  <a :href="aHref" target="_blank"><img :src="imgURL" alt="博客轮播" height="200" width="400" ></a>

  <!-- 对象语法: 动态绑定class, 当isActive为true的时候, 添加active样式, 第二个是通过getClasses方法返回的一个对象进行动态绑定-->
  <h2 class="title" :class="{active: isActive, line: isLine}">{{message}}</h2>
  <h2 class="title" :class="getClassObj()">{{message}}</h2>
  <!--  通过btnClick函数实现点击变色, 通过赋值相反值实现,如果是true则修改为false -->
  <button @click="btnClick">按钮</button>

  <!-- 列表语法: 动态绑定class -->
  <h2 class="title" :class="[active, line]">{{message}}</h2>
  <h2 class="title" :class="getClassList()">{{message}}</h2>


  <!-- 对象语法: 动态绑定style -->
  <h2 :style="{fontSize: finalSize + 'px', backgroundColor: finalColor}">{{message}}</h2>
  <h2 :style="getStyles()">{{message}}</h2>

  <!-- 数组语法: 动态绑定style -->
  <h2 :style="[baseStyle, baseStyle1]">{{message}}</h2>

</div>

<script src="../js/vue.v2.6.12.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: 'baiyongjie',
      // 动态绑定a和img使用到属性变量
      imgURL: 'https://baiyongjie.com/wp-content/uploads/2019/11/0072Vf1pgy1foxk7k489xj31kw0w0e3a.jpg',
      aHref: 'https://baiyongjie.com',

      // 对象语法, 动态绑定class时候使用到的变量
      isActive: true,
      isLine: true,

      // 数组语法, 动态绑定class时候使用到的变量
      active: 'aaaaaa',
      line: 'bbbbbbb',

      // 对象语法, 动态绑定style时候使用到的变量
      finalSize: 40,
      finalColor: 'red',

      // 数组语法, 动态绑定style时候使用到的变量
      baseStyle: {backgroundColor: 'red'},
      baseStyle1: {fontSize: '40px'},

    },
    methods: {
      // 按钮监听的点击事件, 重新赋值
      btnClick: function () {
        this.isActive = ! this.isActive
      },

      // 返回一个绑定class的对象
      getClassObj: function () {
        return {active: this.isActive, line: this.isLine}
      },

      // 返回一个绑定class的数组
      getClassList: function () {
        return [this.active, this.line]
      },

      // 返回一个绑定style的对象
      getStyles: function () {
        return {fontSize: this.finalSize + 'px', backgroundColor: this.finalColor}
      }
    }
  })
</script>
</body>
</html>
点赞

发表评论

邮箱地址不会被公开。

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据