6 - Vue 学习笔记 - v-bind的基本使用

在某些情况下，除了内容需要动态来决定外，某些属性也希望动态绑定

• 比如动态绑定 a 元素的 href 属性
• 比如动态绑定 img 的src 属性
  这个时候，可以使用 v-bind 指令:

v-bind

1. 作用：动态绑定属性
2. 缩写：:
3. 预期：any (with argument) | Object (without argument)
4. 参数：attrOrProp (optional)

---

基本使用

<div id="app">
	
	
	
	
	
	<img v-bind:src="imgURL" alt="">
	
	<a v-bind:href="aHref">百度一下a>
div>

<script src="../js/vue.js">script>
<script>
	const app = new Vue({
		el: "#app",
		data: {
			message: "hello",
			imgURL: "E:\\image.jpg",
			aHref: "https://www.baidu.com"
		}
	});
script>

v-bind 语法糖

• v-bind 有一个对应的语法糖，也就是简写方式
  在开发中，我们通常会使用这种语法糖的形式，因为这样更加简洁
• 简写方式如下：

  
  <img :src="imgURL" alt="">
  <a :href="aHref">百度一下a>
  

---

v-bind 动态绑定 class

我们可以通过 v-bind 动态绑定 class 属性，如下

<h2 class="active">{{message}}h2>

<h2 :class="active">{{message}}h2>

--- .... ---
// data 内容如下
data: {
	message: "hello",
	active: "active",
}

我们会发现，这似乎多此一举，但事实上，我们一般不这样用，我们一般绑定的是一个对象。

v-bind 绑定 class 对象语法

我们给 class 绑定一个对象，通过对象里面的值，来判断是否绑定上去。比如下面这样

	
	<h2 :class="{active:isActive,line:isLine}">{{message}}h2>
--- .... ---
// data 内容如下
data: {
	message: "hello",
	active: "active",
	isActive: true,
	isLine: false
}

这样子绑定后，如果对象的值为 true，那么才会绑定上去，否则不会绑定上。这个可以很方便的处理一种情况：在点击某一个标签时，我们希望点击的标签，发生改变，而没被点的不发送改变。下面我们来实现一下。

<div id="app">
	<h2 :class="{active:isActive,line:isLine}">{{message}}h2>
	<button @click="btnClick">按钮button>
div>

<script src="../js/vue.js">script>
<script>
	const app = new Vue({
		el: "#app",
		data: {
			message: "hello",
			active: "active",
			isActive: true,
			isLine: true
		},
		methods: {
			btnClick: function () {
				this.isActive = !this.isActive;
			}
		}
	});
script>

这样点击了按钮，h2 就会加上 active 这个类名，再通过 CSS 修改样式

我们还可以给绑定了 class 的标签，再定义 class 属性，vue 会帮我们合并这些 class 属性

<h2 class="title" :class="{active:isActive,line:isLine}">{{message}}h2>

显然，我们会发现这样会使 html 看起来过于复杂，我们可以将 :class 里面的值放在一个 methods 或者 compute 中

<h2 :class="getClasses()">{{message}}h2>
--- ... --- 
// 在 methods 中定义该方法，返回一个对象
getClasses: function () {
	return {active: this.isActive, line: this.isLine};
}

v-bind 绑定 class 数组语法

我们也可以在 :class 中绑定数组，如下

<h2 class="title" :class="['active','line']">{{message}}h2>

这样 h2 的 class 属性会有 title,active,line

---

v-bind 绑定 style

我们可以利用 v-bind:style 来绑定一些 CSS 内联样式
绑定 v-bind 绑定 style 的方式也有两种

v-bind 绑定 style 对象语法

在写 CSS 属性名(对象的 key )的时候，比如 font-size

• 可以使用驼峰式(cameCase) — fontSize
• 或者使用短横线分隔(kebab-case，记得用单引号括起来) font-size

<div id="app">
	
	
	
	
	<h2 :style="{fontSize:finalSize,backgroundColor:finalColor}">{{message}}h2>
div>

<script src="../js/vue.js">script>
<script>
	const app = new Vue({
		el: "#app",
		data: {
			message: "hello",
			finalSize: '100px',
			finalColor: 'red'
		}
	});
script>

v-bind 绑定 style 数组语法

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

<div id="app">
	<h2 :style="[baseStyle,baseStyle1]">{{message}}h2>
div>

<script src="../js/vue.js">script>
<script>
	const app = new Vue({
		el: "#app",
		data: {
			message: "hello",
			baseStyle: {
				backgroundColor: 'red'
			},
			baseStyle1: {
				fontSize: '100px'
			}
		}
	});
script>