vue-cli3.0以上 + typeScript 教程学习指导(三) 计算属性 watch 新
这是一个系列文章 之前的系列文章地址:https://blog.csdn.net/www_share8/category_9877844.html今天 我们来学习一下计算属性 和watchvue中关于计算属性 就是当a,b(关联着a),当a改变后 b也要跟着改变 这个时候就可以使用计算属性了,watch 也有这样的功能,watch和计算属性的 区别 大家可以网上查询一下资料,这不是本次的重...
·
这是一个系列文章 之前的系列文章地址:https://blog.csdn.net/www_share8/category_9877844.html
今天 我们来学习一下计算属性 和watch
vue中关于计算属性 就是当a,b(关联着a),当a改变后 b也要跟着改变 这个时候就可以使用计算属性了,watch 也有这样的功能,watch和计算属性的 区别 大家可以网上查询一下资料,这不是本次的重点 。
先来看一下 vue中是如下写计算属性的和watch
<template>
<div class="tt">
<el-input v-model="msg"></el-input>
<div><span>我是计算属性内容,在输入后面添加hell--</span>{{inputContent}}</div>
<div><span>我是watch 在输入内容后 加 world--</span>{{inputWatch}}</div>
</div>
</template>
<script>
export default {
name: 'tt',
data () {
return {
msg:'',
inputWatch: ''
}
},
computed: {
inputContent: function () {
return this.msg + ' hello'
}
},
watch: {
msg: {
handler (newData, oldData) {
this.inputWatch = newData + ' world'
},
immediate: true
}
}
}
</script>
ts 计算属性(get 计算属性名,引用和之前的一样)
在来看一下 typeScript中 由于vue教程中提到了,计算属性默认只有 getter,不过在需要时你也可以提供一个 setter:
说明计算属性是直接可以使用 get set 来设置了 这就是下面的这样的ts代码了
<template>
<div class="hello">
<el-input v-model="msg"></el-input>
<div><span>我是计算属性内容,在输入后面添加hell--</span>{{inputContent}}</div>
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
@Component
export default class HelloWorld extends Vue {
private msg: string = "测试";
get inputContent() {
return this.msg + " hello";
}
}
</script>
ts 中watch 代码如下
首先 从vue-property-decorator引入watch,
@Watch('监听内容',{是否需要深度监听的内容}) 后面跟一个回调函数 名字(叫什么都可以)
<template>
<div class="hello">
<el-input v-model="msg"></el-input>
<div><span>我是watch 在输入内容后 加 world--</span>{{inputWatch}}</div>
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
@Component
export default class HelloWorld extends Vue {
private msg: string = "测试";
private inputWatch: string = "";
@Watch("msg",{immediate: true, deep: true})
onChangeValue(newVal: string, oldVal: string) {
this.inputWatch = newVal + " world";
}
}
</script>
总结一下,对比vue 计算属性变成了get 其他都没有变,watch 全新的写法 需要学习多练习
更多推荐
已为社区贡献6条内容
所有评论(0)