v-bind
<!--
绑定 class的几种方式
1, 对象语法
直接绑定一个Object类型数据。或者计算属性或者method或者data
2, 数组语法
直接绑定一个[]类型数据;也可以使用computed,methods,data
在组件上使用的时候,样式规则直接作用到根元素上,
如果需要给组件内部子元素传递值,需要用props传递参数
也适用于:style,
-->
<
div
:class="{
'active'
:
true}"
>对象语法
</
div
>
<
div
:class="{
'active'
:
true,
'error'
:
true}"
>对象语法
</
div
>
<
div
:class="
dataBind"
>dataBind
</
div
>
<
div
:class="
methodsBind()"
>methodsBind
</
div
>
<
div
:class="
computedBind"
>computedBind
</
div
>
<
div
:class="[
'active',{
'error'
:
true}]"
>数组语法
</
div
>
<
div
:class="[
'active',
'error']"
>数组语法
</
div
>
<
div
:class="[
false?
'active':
'error']"
>数组语法
</
div
>
<
div
:style="
bindStyle"
>bindStyle
</
div
>
</
div
>
export
default {
data() {
return {
dataBind: {
active:
true,
error:
true },
bindStyle: {
color:
"red",
fontSize:
"14px"
}
};
}, b
methods: {
methodsBind() {
return {
active:
true,
error:
true };
}
},
computed: {
computedBind() {
return {
active:
true,
error:
true };
}
}
};
<!--
内置指令
1,v-cloak
当网速比较慢,Vue.js还没加载完时候,页面显示{{message}}字样,
这个过程中屏幕有闪动,
v-cloak解决初始化慢,导致页面闪动。对简单项目比较实用,
复杂项目HTML页面中只有一个div,所以不需要v-cloak
[v-cloak] {
display: none;
}
2,v-once
定义它的元素和组件只渲染一次。包括元素或组件的所有子节点。
首次渲染后不再随着数据的变化重新渲染。将被视为静态内容。
一般用不到,进一步优化性时,可能会用到
3, v-if v-else-if v-else类似
Vue的条件指令可以更具表达式中的值在DOM中渲染,或者销毁元素/组件
true的时候表达式被渲染,false的时候表达式被移除。
Vue在渲染时,出于性能的考虑。尽可能的使用已有的元素而非重新渲染。
Vue.js提供了key的属性,可以让自己决定是否要复用元素,key值必须必须是唯一的。
<
div
class=
"container-v-if"
>
<
div
v-if="
type===
'user'"
>
<
label
for=
"user"
>用户名:
</
label
>
<
input
type=
"text"
placeholder=
"请输入用户名"
id=
"user"
key=
"user"
>
</
div
>
<
div
v-else
>
<
label
for=
"mail"
>邮箱:
</
label
>
<
input
type=
"text"
placeholder=
"请输入邮箱"
id=
"mail"
key=
"mail"
>
</
div
>
<
button
@click="
changeToggle"
>切换类型
</
button
>
</
div
>
4,v-show
v-show的用法与v-if基本一致。元素隐藏增加了内联样式display:none;
v-show 不能再template上使用
<template></template>
v-show 和v-if 的比较
v-if是真正的条件渲染,它会根据表达式是适当的销毁或者重建元素,
以及绑定事件或者子元素。若表达式的初始值是false,
则一开始元素/组件并不会渲染,只有条件第一次变成真的时候,才开始编译。
v-show 只是简单的css属性切换。无论条件是否为真。都会被编译。
v-show更适合频繁切换条件,v-if更适合经常改变的场景
5,v-for
v-for = ' item in list' 列表支持in 也支持 of
v-for = ' (item,index) in list' 列表支持可选参数作为索引
v-for = '(value, key, index) in obj' 遍历 对象
v-for = 'n in 10 ' 迭代整数
-->