vue运行单个文件
vue serve Hello.vue
为计算属性提供setter
computed:{
fullName:{
get(){
return this.firstname+' '+this.lastname
},
set(newValue){
var names=newValue.split(' ')
this.firstname=names[0]
this.lastname=names[names.length-1]
}
}
}
运行fullName='MIT deng’赋值语句是时,setter会被调用,firstname和lastName 也会相应的更新
利用computed动态地切换class
<div>
<h1 :class="classObject">邓腾浩在奔跑</h1>
<button @click="isActive=!isActive">click it to change</button>
</div>
data() {
return {
isActive: true
};
},
computed: {
classObject(){
return{
myclass:this.isActive
}
}
}
input两种形式
<input placeholder="Enter your username">
<input value="Enter your username">
用key管理可复用的元素
<template v-if="isActive">
<label>name</label>
<input placeholder="Enter your name">
</template>
<template v-else>
<label>age</label>
<input placeholder="Enter your age">
</template>
<button @click="isActive=!isActive">change it</button>
点击change it 切换template,但不会清除用户已经输入的内容
<template v-if="isActive">
<label>name</label>
<input placeholder="Enter your name" key="name">
</template>
<template v-else>
<label>age</label>
<input placeholder="Enter your age" key="age">
</template>
<button @click="isActive=!isActive">change it</button>
为input添加一个具有唯一值的key属性,来表达“这两个元素是完全独立的,不要复用他”
注意,
带有v-show
的元素始终会被渲染并保留在DOM中。v-show
只是简单地切换元素地CSS属性display
- 注意,
v-show
不支持<template>
元素,也不支持v-else
v-show
不管初始条件是什么,元素总是会被渲染- 一般来说,
v-if
有更高的切换开销,而v-show
有更高地初始渲染开销