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 ' 迭代整数
-->