computed的用法

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>

computed的用法相关推荐

Vue中的computed的用法
computed又被称作计算属性,用于动态的根据某个值或某些值的变化,来产生对应的变化,computed具有缓存性,当无关值变化时,不会引起computed声明值的变化.产生一个新的变量并挂载到vue ...
学习vue3系列computed
响应式API中 computed 和之前的 computed 选项用法类似. 对于任何复杂逻辑,我们都可能使用计算属性.比如翻转字符串: <template><h1>{{ te ...
vue3 watchEffect用法以及清除副作用
一.computed comdwd用法主要是:当一些属性需要依赖一个状态的时候,可以使用computed属性处理 Options API中 computed主要是配置的选项 Compostion A ...
Vue3 过10种组件通讯方式
本文简介点赞 + 关注 + 收藏 = 学会了本文讲解 Vue 3.2 组件多种通讯方式的基础用法,并且使用了单文件组件 <script setup> . 众所周知,Vue.js 中一 ...
Vue3 10多种组件通讯方法
本文简介点赞 + 关注 + 收藏 = 学会了本文讲解 Vue 3.2 组件多种通讯方式的基础用法,并且使用了单文件组件 <script setup> . 众所周知,Vue.js 中一 ...
vue一些比较重要知识点的复习
文章目录 Vue的MVVM模型知道什么是MVVM MVVM的关系 MVVM优点假如面试问到我说说看MVVM,我可能会这样子回答 Vue的绑定键盘鼠标操作和在组件使用上的要点 Vue的事件操作(v- ...
云开发、自定义组件、分包加载、基础库兼容问题、骨架屏使用
一.云开发基本使用(了解) 1.环境初始化开发前需要在小程序端选择好相应的云环境,一般在小程序的app.js文件中进行处理 onLaunch: function () {if (!wx.cloud) ...
【Vue】黑马Vue入门到高级实战汇总
目录 v-text v-cloak 计算属性computed 计算属性双向绑定监听器watch Class与Style绑定v-bind 条件渲染v-if v-if 与 v-show 比较列表渲染 ...
computed set 自定义参数_深入理解vmodel之自定义组件用法
根据上一篇<深入理解 v-model 之表单用法>基本对 v-model 有了比较深的理解,接下来我们看看它如何在自定义组件中使用. 首先,我们知道下面两个用法等价的: <input ...

computed的用法

1、计算属性 computed

computed的用法相关推荐

最新文章

热门文章