(十八)v-if,v-else-if,v-else和v-show区别，computed(计算属性),watch(监听dom元素变化后执行得事件)

区别:

v-if,v-else-if,v-else相当于DOM元素的添加删除

v-show控制元素的渲染，显示或者不显示

v-show的性能开销小

写法上v-if更简单,但是性能开销上v-show更小一些

 

computed里面得方法用于计算属性值,当拿到数据后,对数据进行二次处理,然后绑定到对应得dom节点上,里面得方法必须要有返回值

watch:监听dom元素,当某个dom元素法生改变得时候,进行得一系列操作,里面得方法没有返回值

watch更消耗性能

实现代码:

<template>

<div style="margin-left:30px;margin-top:30px;">

  <h1>666</h1>

 <div>

   <div v-if="no>=5">ce1</div>

   <div v-else>ce2</div>

   <div>ce3</div>

<br/>

等级

<div v-if="cj>=90">一级</div>

<div v-else-if="cj>80">二级</div>

<div v-else-if="cj>70">三级</div>

<div v-else>四级</div>

<br/>

等级show

<div v-show="cj>=90">一级</div>

<div v-show="cj<90 & cj>=80">二级</div>

<div v-show="cj<80& cj>=70">三级</div>

<div v-show="cj<70">四级</div>

 </div>

 <br/>

 <!-- 计算 -->

 {{no+3}}&nbsp;

 <!-- 三目运算 -->

 {{flag?"true":"false"}}&nbsp;

 <!-- vue调用javascript的方法-->

 {{message.split("").reverse().join("")}} &nbsp;

 <!-- 计算属性 -->

 {{GetMsssage}}

 <button @click="UpdateMessage()">改变属性值</button>

 <br/>

 <input type="text" v-model="keyword" placeholder="请输入关键字"/>

 <ul>

   <li v-for="(item,index) in GetList" :key="index">

     {{item}}

   </li>

 </ul>

  <!-- watch监听 -->

  <br/>

  <input type="text" v-model="firstname" placeholder="请输入关键字"/>-

  <input type="text" v-model="lastname" placeholder="请输入关键字"/>

  <br/>

  {{funnname}}

 </div>

</template>

<script>

export default {

  name: "AppA6",

  data() {

    return {

      no:5,

      cj:80,

      flag:false,

      message:"123456",

      list:["123","456","789","qwe","rty"],

      keyword:'',

      firstname:'',

      lastname:'',

      funnname:'',

    };

  },

  components: {

 

  },

  methods: {

   UpdateMessage(){

       this.message="rty"

   },

  },

  computed:{//用计算属性实现监听数据变化,必须要有return返回值,计算从第一次返回数据开始

     GetMsssage(){

      return this.message.split("").reverse().join("");

     },

     GetList(){//按计算属性实现筛选功能

       var temp=[];

       this.list.forEach((value)=>{

         if(value.indexOf(this.keyword)!=-1&this.keyword!=''){

           temp.push(value)

         }

       })

       return temp;

     }

  },

  watch:{//使用watch进行监听,当dom元素法生变化得时候才执行,没有返回值，要发生对应得dom节点变化才执行

    firstname:function(value){

      this.funnname=value+this.lastname;

    },

    lastname:function(value){

    this.funnname=this.firstname+value;

    }

  },

  mounted() {},

};

</script>

<style>

</style>