class与style绑定
可以用v-bind来绑定class和style,并且值可以使字符串,对象或者数组。并且class同样可以以列表的形式存在。同时和普通的class也可以共存。
我们先来一个字符串为值的实例:
HTML:
<p class="brand1" v-bind:class="brand2:isShow , brand3:isRed"></p>
JS:
data:{
isShow:true,
isRed:false
}
显示的class是brand1和brand2.
这是一个对象为值的实例:
HTML:
<p class="brand1" v-bind:class="classChoose"></p>
JS:
data:{
classChoose:{
isShow:true,
isRed:false
}
}
这就是把对象当作值放在class里面。
更为强大的是我们也可以在class里面使用计算属性
HTML:
<div v-bind:class="classObject"></div>
JS:
data: {
isActive: true,
error: null
},
computed: {
classObject: function () {
return {
active: this.isActive && !this.error,
'text-danger': this.error && this.error.type === 'fatal',
}
}
}
然后我们来看看数组作为值的实例:
HTML:
<p class="brand1" v-bind:class="[isShowClass,isRedClass]"></p>
JS:
data:{
isShowClass:isShow,
isRedClass:isRed
}
当然以上的方式也可以混杂使用。
用在组件上
当你在组件上使用这些类的时候,类会被添加在根元素上,而不会覆盖其他的类。
实例:
HTML:
<componentMy class="second"></componentMy>
JS:
Vue.component('componentMy',{
template:"<p class="first">Hi</p>"
})
那么最终的类就是:first和second。
这种应用同样适用于v-bind作用与组件时。
绑定内联样式
v-bind=style的形式十分类似,采用对象语法,属性值采用驼峰式命名法,中间用分隔符,隔开。
实例:
HTML:
<p v-bind:style="{color:whitchColor,fontSize:whitchSize}"></p>
JS:
data:{
whitColor:red,
whitchSize:4px
}
当然你也可以直接对属性值使用对象。像上面的代码就可以写成一下形式:
<p v-bind:style="myStyle"></p>
data:{
myStyle{
color:"red",
fontSize:"4px"
}
}
向class一样,style也可以使用数组语法操作。
条件渲染
vuejs中可以使用v-if来行使if条件语句。
插句题外话,其实我们可以看见vuejs实现把很多的js的东西在view视图上就可以完成,这种方式确实简化了js的书写。
简单的v-if语法:
<p v-if="false">你好</p>
如果有多条语句使用v-if,一个个书写会很麻烦,我们可以采用template的方式:
<template v-if="ok">
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</template>
实际上template本身在加载的时候并不会出现。
而v-else语句和else本身是对应的。
如果要使用v-else就必须和if语句紧连在一起。
<div v-if="Math.random() > 0.5">
Now you see me
</div>
<div v-else>
Now you don't
</div>
下面我们来看看else-if的语句块
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
用key元素管理可复用的元素
在现实中,比如一些登录界面,我们可以在管理员用户和普通用户之间快速切换,并且输入的内容不会改变,就是因为复用了已有的元素,而不是从头渲染。这样的好处是,vue的速度非常的快。
我们来看一个实例:
<template v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address">
</template>
当然如果想要自己渲染就可以定义key值。
<template v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address" key="email-input">
</template>
v-show
v-show用来简单的切换css的display
<h1 v-show="ok">Hello!</h1>
需要注意的是,v-show作用的元素会一直出现在dom里面
关于v-show和v-if的区别
1. v-show是简单的切换css的display,而v-if是真正的渲染,会进行重建和销毁,而且v-if也是惰性的。
2. v-if会增加性能开销,而v-show会增加渲染开销 。