Vue复习2

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属性，来表达“这两个元素是完全独立的，不要复用他”
注意，元素仍然会被高效地复用，因为它们没有添加key属性

带有v-show的元素始终会被渲染并保留在DOM中。v-show只是简单地切换元素地CSS属性display

1. 注意，v-show不支持<template>元素，也不支持v-else
2. v-show不管初始条件是什么，元素总是会被渲染
3. 一般来说，v-if有更高的切换开销，而v-show有更高地初始渲染开销