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>
浏览器显示如下：
将样式对象，定义到 data 中，并直接引用到 :style 中
浏览器显示如下：
在 :style 中通过数组，引用多个 data 上的样式对象
浏览器显示如下：
本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。
原始发表：2020-04-13，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
