vue计算属性computed/数据监听watch

责编:menVScode 2018-01-28 17:14 阅读(1369)

        计算属性的更新只会根据当前要处理数据的值。假如当前数据的值不再更新,那么计算属性也不会在更新了。

        调用methods里面方法进行更新,无论什么时候调用,都会获取当前的数据值进行处理。

<template>
  <div id="app">
    <input type="text" v-model="myValue">
    {{ getMyValue2() }}
  </div>
</template>

<script>
import Vue from 'vue'
export default {
  name: 'App',
  components:{compA},
  data(){
    return { myValue:'' }
  },
  computed:{
    getMyValue(){
      return this.myValue.replace(/\d/g,'')
    }
  },
  methods:{
    getMyValue2(){
      return this.myValue.replace(/\d/g,'')
    }
  }
}
</script>


        数据属性监听watch

<template>
  <div id="app">
    <input type="text" v-model="myValue">
    {{ myValue }}
  </div>
</template>

<script>
import Vue from 'vue'
export default {
  name: 'App',
  components:{compA},
  data(){
    return { myValue:'' }
  },
  computed:{ },
  methods:{ },
  watch:{
    myValue:function(val,oldVal){//新值、旧值
      console.log(val,oldVal)
    }
  }
}
</script>
标签: computed $watch vue
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码