Vue.js 笔记03

发布于 2020-05-25  322 次阅读


关键词:v-bind 及 class 与 style 绑定

回顾一下之前写的v-bind实例:

<div id="app">
    <a v-bind:href="url">链接</a>
    <img v-bind:src="imgUrl">
</div>
<script>
    var vm = new Vue({
        el:'#app',
            data:{
                url:'https://www.github.com',
                imgUrl:'http://xx.xx/img.png'
            }
    })
</script>

上面这个例子中,链接href和图片src属性都被动态设置了,当数据变化时,就会重新渲染
元素样式名称css和内联样式style的动态绑定是最常见的数据绑定需求,Vue.js中,增强了对class以及style的绑定

绑定class的几种方法

对象语法

<div id="app">
    <div :class="{'active':isActive}"></div>
    <div class="active"></div>
</div>
<script>
    var vm = new Vue({
        el:'#app',
            data:{
                isActive:true
            }
</script>

当:class内的表达式各项为真时,对应的类名会加载。
根据以上语句,最终的渲染结果应是

<div class="active"></div>

对象中也可以传入多个属性,来动态切换class,:class可以和普通class共存

<div id="app">
	<div class="static" :class="{'active':isActive,'error':isError}"></div>
</div>
<script>
	var vm = new Vue({
		el:'#app',
		data:{
			isActive:true,
			isError:false
		}
	})
</script>

以上语句渲染结果为

<div class="static active"></div>

当:class的表达式过长或逻辑复杂时,还可以绑定一个计算属性,例如

<div id="app">
	<div :class="classes"></div>
</div>
<script>
	var vm = new Vue({
		el:'#app',
		data:{
			isActive:true,
			error:null
		},
		computed:{
			classes(){
				return {
					active: this.isActive && !this.error,
					'text-fail':this.error && this.error.type === 'fail'
				}
			}
		}
	})

(啊这,缩进丑的一批)

除了计算属性,还可以直接绑定一个Object类型的数据,或者用类似计算属性的methods方法

数组语法

当需要应用多个class时,可以使用数组语法,给:class绑定一个数组,应用一个class列表:

<div id="app">
	<div :class="[activeCls,errorCls]"></div>
</div>
<script>
	var vm = new Vue({
		el:'#app',
		data:{
			activeCls:'active',
			errorCls:'error'
		}
        })
</script>

渲染后,结果为

<div class="active error"></div>

也可以使用三元表达式来根据条件切换class,例如

<div id="app">
	<div :class="[isActive ? activeCls : '' , errorCls]"></div>
</div>
<script>
	var vm = new Vue({
		el:'#app',
		data:{
			isActive:true
			activeCls:'active',
			errorCls:'error'
		}
         })
</script>

还可以继续套娃,比如在数组语法中使用对象语法

<div id="app">
	<div :class="[{'active':isActive} , errorCls]"></div>
</div>

来一个最狠的终极套娃

<div id="app">
	<div :class="classes"></div>
</div>
<script>
	var vm = new Vue({
		el:'#app',
		data:{
			size:'large',
			disabled:true
		},
		computed:{
			classes(){
				return [
					'btn',
					{
						['btn'+this.size]:this.size !== '',
						['btn-disabled']:this.disabled
					}
				];
			}
		}
	})
</script>

以上示例中的样式btn会始终应用,当数据size不为空时,会应用样式前缀btn-,后加size的值;当数据disabled为真时,会应用btn-disabled样式

在组件上使用

ps:这里依赖Vue的组件相关内容,如果还未接触这部分内容,可以先跳过。

如果直接在自定义组件上使用class或:class,样式规则会直接应用到这个组件的根元素上,例如声明一个简单的组件:

<script>
	Vue.component('my-component',{
		template:'<p class="article">一些文本</p>'
	});
</script>

在调用这个组件时,应用对象语法或数组语法给组件绑定class,以对象语法为例:

<div id="app">
	<my-component :class="{'active':isActive}"></my-component>
</div>

假如isActive为真,则组件渲染结果为

<p class="article active">一些文本</p>

这种用法仅适用于自定义组件的最外层是一个根元素,否则无效。若不满足这个条件或需要给具体的子元素设置类名,则需要使用组件的props来传值。这些用法同样适用于下一节中绑定内敛样式style的内容。

绑定内联样式

使用v-bind:style(即:style)可以给元素绑定内联样式,方法与:class类似,也有对象语法和数组语法,例如

<div id="app">
	<div :style="{'color':color,'fontSize':fontSize+'px'}">文本</div>
</div>
<script>
	var vm = new Vue({
		el:'#app',
		data:{
			color:'red',
			fontSize:14
		}
	})
</script>

CSS属性名称使用驼峰命名(camelCase)或短横分隔(kebab-case)命名

直接写一长串CSS不便于阅读和维护,所以一般都写在data或computed里,以data为例重写上面这个例子:

<div id="app">
	<div :style="styles">文本</div>
</div>
<script>
	var vm = new Vue({
		el:'#app',
		data:{
			styles:{
				color:'red',
				fontSize:14+'px'
			}
		}
	})
</script>

应用多个样式对象时,可使用数组语法

<div :style="[styleA,styleB]">文本</div>

实际上:style的数组语法不常用,因为往往可以都写进一个对象里,较常用的应是计算属性

另外,使用:style时,Vue.js会自动给特殊的CSS属性名称增加前缀,
比如 transform


何为BS?B-big,S-shui。