v-bind
传对象
<div v-bind:class="{active:isActive}"></div>
data: {
isActive: true
}
可以把对象放到computed里面 computed一定要返回对象
<div v-bind:class="classObject"></div>
data: {
isActive: true,
error: null
},
computed: {
classObject: function () {
return {
active: this.isActive && !this.error,
'text-danger': this.error && this.error.type === 'fatal'
}
}
}
数组语法
<div v-bind:class="[activeClass,errorClass]"></div>
data:{
activeClass:'active',
errorClass:'text-danger'
}
三目运算符
<div v-bind:class="[isActive ? activeClass : '' ,errorClass]"></div>
会直接添加errorClass 只有在isActive为true时,才会添加activeClass
数组对象
<div v-bind:class="[{active:isActive},errorClass]"></div>
v-else-if
<div v-if="type == 'A'">A</div>
<div v-else-if="type == 'B'">B</div>
<div v-else>非A,B</div>
用template来包含代码块 控制一块的显示 ok为false时 template也不会显示
<template v-if="ok">
<h1>标题</h1>
<p>段落 1</p>
<p>段落 2</p>
</template>
注意在切换页面
<template v-if="loginType === 'username'">
<label>用户名</label>
<input placeholder="请输入用户名" key="username-input">
</template>
<template v-else>
<label>邮箱</label>
<input placeholder="请输入邮箱" key="email-input">
</template>
切换不加key的部分不会重新渲染 也就是说不加key 输入框有值 在切换后,值会依然有 优点:渲染速度快。
v-show
<h1 v-show="ok">hello</h1>
他的元素会始终渲染并保留你在DOM中。v-show只会切换元素的dispolay的css属性
v-if 和 v-show
都能实现控制元素隐藏与否
v-if 是'真实'的条件渲染,每一次切换 它都会销毁和重新创建条件块内的事件监听器和子组件
v-if只有在为true时才会渲染条件块
v-show它都会渲染 只是样式隐藏
v-for
<ul>
<li v-for="item of items">{{item.message}}</li>
</ul>
<ul>
<li v-for="(item,index) in items">{{item.message}}</li>
</ul>
v-for也可以在整数值范围内迭代,这种情况,会把模板重复多次.
<div>
<span v-for="n in 10">{{n}}</span>
</div>
在<template>上使用v-for
<ul>
<template v-for="item in items">
<li>{{ item.msg }}</li>
<li class="divider"></li>
</template>
</ul>
带有v-if的v-for
<li v-for="todo in todos" v-if="!todo.isComplete">{{todo}}</li>
它们都在同一节点上,v-for的优先级高于v-if.这意味着v-if将分布在循环中的每次迭代上运行。当你只想渲染某些节点时.这个非常有用。
注意:在迭代的时候最好提供一个key.因为数组顺序在操作时可能会变.变了之后视图也会相应的改变.
提供key使排序速度快.
<div v-for="item in items" :key="item.id"></div>
vue将观察数组的变化包裹起来,方便在调用这些方法时.能够触发视图更新
push() pop() shift() unshift() splice() sort() reverse()
注意事项 由于js的限制 Vue无法检测到已下数组的变化
1:直接设置某一项 vm.items[indexOfItem] = newValue;
2:修改数组长度 vm.items.length = newLength
必须通过响应式系统触发状态更新.
Vue.set(example1.items, indexOfItem, newValue)
example1.items.splice(indexOfItem, 1, newValue)
example1.items.splice(newLength)
关于对对象的监控 实时更新
var vm = new Vue({
data:{ a : 1}
})
//vm.a是响应的
vm.b =2 //vm.b 不是响应的
vue 不允许在已经创建的实例上,动态的添加新的根级响应式属性。然而,可以通过使用Vue.set(Obj,key,value)方法.将响应式属性添加到嵌套的对象上。
如 添加新的age属性
var vm = new Vue({
data: {
userProfile: {
name: 'Anika'
}
}
})
Vue.set(vm.userProfile,'age',27);
也可以
vm.$set(this.userProfile,'age',27)
向已经存在的对象上添加一些新的属性。例如使用Object.assign() 或 _.extend()方法。
这种情况,应该创建一个新的对象.这个对象同时具有对象的所有属性.可以通过如下方式.添加新的响应式属性
this.userProfile = Object.assign({}, this.userProfile, {
age: 27,
favoriteColor: 'Vue Green'
})
