4. Vue v-bind绑定元素属性的基本使用

前言

上一章节讲述了使用 「插值表达式」、「v-text」、 「v-html」 的数据渲染功能。

那么对于 样式类class、html属性 的值设置，可以使用什么来控制呢？

可以使用本章节的 「v-bind」 来控制。下面来看看如何使用！

基本使用方式

v-bind的使用说明

动态地绑定一个或多个特性，或一个组件 prop 到表达式(这部分主要是用来提供父子组件的值传递的，放到后面的章节来介绍)。

v-bind的三种用法

直接使用指令v-bind
使用简化指令:
在绑定的时候，v-bind的绑定内容是js表达式，所以可以拼接绑定内容：:title="btnTitle + ', 这是追加的内容'"

下面来逐个示例一下：

示例一：直接使用执行 v-bind

下面使用v-bind方法来绑定一个input按钮的title属性，自定义title内容，如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!-- 将来 new 的Vue实例，会控制这个 元素中的所有内容 -->
    <div id="app">
        
        <!-- 使用v-bind绑定按钮的title内容 -->
        <input type="button" value="按钮" v-bind:title="mytitle">

    </div>

    <!--  1.导入vue.js库  -->
    <script src="lib/vue.js"></script>

    <script>
        // 2. 创建一个Vue的实例
        var vm = new Vue({
            el: '#app',
            data: {
                mytitle: 'This is mytitle!'
            }
        })
    </script>

</body>
</html>

浏览器显示如下：

可以看到使用v-bind可以绑定title属性显示内容。

示例二：使用简化指令`:`

浏览器显示如下：

示例三：在绑定的时候，`v-bind`的绑定内容是`js`表达式，所以可以拼接绑定内容：`:title="btnTitle + ', 这是追加的内容'"`

浏览器显示如下：

好了，有了这上面三个示例的理解，下面来看看更加多的使用方式。

v-bind属性绑定为元素，设置class类样式

上面只是示例「v-bind」绑定一个属性的使用，那么下面来看看如何动态绑定「class样式类」。

使用v-bind绑定class样式的几种方式

数组

<h1 :class="['red', 'thin']">通过v-bind属性绑定为元素</h1>

数组中使用三元表达式

<h1 :class="['red', 'thin', isactive?'active':'']">通过v-bind属性绑定为元素</h1>

数组中嵌套对象

<h1 :class="['red', 'thin', {'active': isactive}]">通过v-bind属性绑定为元素</h1>

直接使用对象

<h1 :class="{red:true, italic:true, active:true, thin:true}">通过v-bind属性绑定为元素</h1>

上面罗列了四种v-bind绑定元素class样式的方式，下面逐个示例。

首先编写样式，使用class直接设置样式

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

        .thin {
            font-weight: 200;
        }

        .italic {
            font-style: italic;
        }

        .active {
            letter-spacing: 0.5em;
        }
    </style>
</head>
<body>

    <div id="app">

        <h1 class="red thin italic active">通过v-bind属性绑定为元素</h1>

    </div>

    <!--  1.导入vue.js库  -->
    <script src="lib/vue.js"></script>

    <script>
        // 2. 创建一个Vue的实例
        var vm = new Vue({
            el: '#app',
            data: {},
            methods:{}
        })
    </script>

</body>
</html>

浏览器显示如下：

数组的方式来设置class样式

因为v-bind的绑定的内容是js表达式，所以传递的参数是一个「字符串数组」（[ 'red', 'thin', 'italic', 'active' ]），浏览器显示效果如下：

数组中使用三元表达式设置class样式

浏览器显示如下：

但是其实「三元表达式」增加了代码的可读性难度，下面可以使用对象字典的方式来设置如下。

数组中嵌套对象

浏览器显示如下：

直接使用对象

浏览器显示如下：

这样直接在class上写对象的方式的确可以设置样式了，还可以将其作为一个对象写到data中，如下：

浏览器显示如下：

通过v-bind属性绑定为元素绑定style行内样式

「v-bind」不单单可以绑定class样式类，还可以绑定「style」行内样式。

使用内联样式

直接在元素上通过 :style 的形式，书写样式对象

<h1 :style="{color: 'red', 'font-size': '40px'}">Vue 中通过v-bind属性绑定为元素</h1>

将样式对象，定义到 data 中，并直接引用到 :style 中

在data上定义样式：

data: {
        h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' }
}

在元素中，通过属性绑定的形式，将样式对象应用到元素中：

<h1 :style="h1StyleObj">Vue 中通过v-bind属性绑定为元素</h1>

在 :style 中通过数组，引用多个 data 上的样式对象

在data上定义样式：

data: {
        h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' },
        h1StyleObj2: { fontStyle: 'italic' }
}

在元素中，通过属性绑定的形式，将样式对象应用到元素中：

<h1 :style="[h1StyleObj, h1StyleObj2]">Vue 中通过v-bind属性绑定为元素</h1>

下面示例如下。

直接在元素上通过 :style 的形式，书写样式对象

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>

    <div id="app">

        <h1 :style="{color: 'red', 'font-size': '40px'}">Vue 中通过v-bind属性绑定为元素</h1>

    </div>

    <!--  1.导入vue.js库  -->
    <script src="lib/vue.js"></script>

    <script>
        // 2. 创建一个Vue的实例
        var vm = new Vue({
            el: '#app',
            data: {
            },
            methods:{}
        })
    </script>

</body>
</html>