vue2.0 之计算属性和数据监听

计算属性computed

<template>
  <div>
    <input type="text" name="" v-model="myVal"><br/>
    {{ myValueWithoutNum }}<br/>
    {{ getMyValueWithoutNum() }}<br/>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        myVal: ‘‘
      }
    },
    computed: {
      myValueWithoutNum () {
        return this.myVal.replace(/\d/g, ‘‘)
      }
    },
    methods: {
      getMyValueWithoutNum () {
        return this.myVal.replace(/\d/g, ‘‘)
      }
    }
  }
</script>

<style>
  html {
    height: 100%;
  }
</style>

上例中myValueWithoutNum是计算属性,getMyValueWithoutNum()是方法调用。

数据监听watch

<template>
  <div>
    <input type="text" name="" v-model="myVal"><br/>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        myVal: ‘‘
      }
    },
    watch: {
      myVal (val, oldval) {
        console.log(val, oldval)
      }
    }
  }
</script>

<style>
  html {
    height: 100%;
  }
</style>

时间: 06-26

vue2.0 之计算属性和数据监听的相关文章

Python黑客编程基础3网络数据监听和过滤

Python黑客编程3网络数据监听和过滤 课程的实验环境如下: •      操作系统:kali Linux 2.0 •      编程工具:Wing IDE •      Python版本:2.7.9 •      涉及到的主要python模块:pypcap,dpkt,scapy,scapy-http 涉及到的几个python网络抓包和分析的模块,dpkt和scapy在kali linux 2.0 中默认已经被安装,如果你的系统中没有需要手动安装一下,下面是软件包安装的简单说明. 在kali下

Python黑客编程3网络数据监听和过滤

Python黑客编程3网络数据监听和过滤 课程的实验环境如下: ?      操作系统:kali Linux 2.0 ?      编程工具:Wing IDE ?      Python版本:2.7.9 ?      涉及到的主要python模块:pypcap,dpkt,scapy,scapy-http 涉及到的几个python网络抓包和分析的模块,dpkt和scapy在kali linux 2.0 中默认已经被安装,如果你的系统中没有需要手动安装一下,下面是软件包安装的简单说明. 在kali下

微信小程序实现数据监听

/** * 设置监听器watch.js */ export function setWatcher(page) { let data = page.data; let watch = page.watch; Object.keys(watch).forEach(v => { let key = v.split('.'); // 将watch中的属性以'.'切分成数组 let nowData = data; // 将data赋值给nowData for (let i = 0; i < key.l

实现简单的js数据监听

主要是用Object.defineProperty实现类似vue的数据绑定. Object.defineProperty 官方地址 步入正题: 第一步: const data = { name: "tom", age: 14 } Object.defineProperty(data, "name", { get(){ return "name被读取了" }, set(val){ console.log('我被赋值了',val) } }) //将此

KVO-对象属性值改变监听

key value observer 键值观察 一.使用方法: 以person对象为例,person中的属性name,监听name值改变的方法 //添加监听的属性keyPath  options:要监听的是新值还是旧值 [self.person addObserver:self forKeyPath:@"name" options:NSKeyValueObservingOptionNew | NSKeyValueObservingOptionOld context:nil]; //监听

system.setting-全局变量数据监听

今天在setting里添加了一个新的变量,想要实现对这个变量的监听.现在记录下方法 首先就是明白一点,我们在system.setting里添加的变量,都会被保存在data/data/com.android.providers.settings/databases/settings/system 里面 INSERT INTO "system" VALUES(120,'voice_unlock_screen',NULL); INSERT INTO "system" VA

vue2.0 配置 选项 属性 方法 事件 ——速查

全局配置 silent  设置日志与警告  optionMergeStrategies   合并策略  devtools  配置是否允许vue-devtools  errorHandler    错误追踪  ignoredElements   忽略在Vue 之外的自定义元素.         keyCodes    自定义键位别名  performance                          在浏览器中启用对组件初始化    productionTip    启动时生成生产提示 全

对vue中的computed属性,watch监听,计算属性理解

自己的理解: computed用来监控自己定义的变量,该变量不在data里面声明,直接在computed里面定义,然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理: computed比较适合对多个变量或者对象进行处理后返回一个结果值,也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化,举例:购物车里面的商品列表和总金额之间的关系,只要商品列表里面的商品数量发生变化,或减少或增多或删除商品,总金额都应该发生变化.这里的这个总金额使用computed属性来进行计算是最

Vue2.0子同级组件之间数据交互

接着我们进入Demo,首先我们可以删除掉模板项目中src/components/Hello.vue,然后在App.vue中删除对于Hello子组件的注册和使用还有一些其他无关紧要的东西,此时的App.vue应为这样 一 .我们先来创建中央事件总线,在src/assets/下创建一个eventBus.js,内容如下(eventBus中我们只创建了一个新的Vue实例,以后它就承担起了组件之间通信的桥梁了,也就是中央事件总线.) 二 . 创建一个firstChild组件,引入eventBus这个事件总