vue2.0 之計算屬性和數據監聽
阿新 • • 發佈:2017-06-28
ext turn rip exp http pre text div log
計算屬性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>
vue2.0 之計算屬性和數據監聽