Vue计算属性, 数据监听

最新推荐文章于 2024-01-21 19:01:45 发布

Lvdon9

最新推荐文章于 2024-01-21 19:01:45 发布

阅读量184

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue

本文链接：https://blog.youkuaiyun.com/qq_37995109/article/details/86634394

Vue 专栏收录该内容

53 篇文章

订阅专栏

本文探讨了Vue.js中数据绑定与计算属性的使用，包括如何通过v-model实现双向数据绑定，以及如何利用计算属性进行数据处理，例如去除字符串中的数字。同时，介绍了watch监听属性变化的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <div id="app">
    <input type='text' v-model='myVal'>
    <!-- {{getmyValueWithoutNum()}} -->
  </div>
</template>

<script>
//如果要使用vue全局.
import Vue from 'vue'

export default {
  data() {
    return {
      myValue:'',
       myVal:'',
    }
  },
  computed:{
    myValueWithoutNum(){
      //数字不能双向绑定 计算属性
      return this.myValue.replace(/\d/g,'');
    }
  },
  //监听val第一次 oldval第二次  //只要数据被更改
  watch:{
    myVal:function(val,oldval){
      console.log(val,oldval);
    }
  },
  methods:{
    //调用方法.
    getmyValueWithoutNum(){
      return this.myValue.replace(/\d/g,'');
    }
  }
};
</script>

<style>
</style>