Vue内置指令

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

-->

转载于:https://www.cnblogs.com/niusan/p/10389450.html