首页 > 代码库 > vue2.0 之计算属性和数据监听
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>
vue2.0 之计算属性和数据监听
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。