1、计算属性 computed
computed用来监控自己定义的变量,该变量不在data里面声明,
直接在computed里面定义,进行处理后返回一个结果值
基础用法:
<template>
<div>
<div>姓:<input type="text" v-model="surname"></div>
<div>名:<input type="text" v-model="name"></div>
<div>姓名:<input type="text" v-model="fullName"></div>
</div>
</template>
<script>
export default {
computed:{
fullName(){
return this.surname+'~'+this.name
}
},
data(){
return{
surname:'勇敢',
name:'小陈',
}
}
}
</script>
<style>
</style>
<body>
<div id="example">
<!-- 显示:a:1 -->
<p>a:{{ plus }}</p>
</div>
</body>
<script>
const vm = new Vue({
el: "#example",
data: {
a: 0,
},
computed: {
plus: function () {
return this.a + 1;
},
},
});
console.log(vm); // // 查看控制台输出的vm,可以看到它有一个属性是:plus:1,⚠️注意是属性
</script>