您可以从Vue JS中的按钮单击调用计算属性，还是应该始终使用方法？
在Vue JS中，按钮单击调用计算属性和使用方法都是可以的，但是根据具体的场景和需求，选择合适的方式是很重要的。
计算属性是Vue提供的一种便捷的属性计算方式，它会根据依赖的数据自动进行计算，并且会缓存计算结果，只有当依赖的数据发生变化时才会重新计算。计算属性适用于那些需要根据多个数据计算得出结果的场景，比如根据用户选择的条件筛选数据列表等。计算属性的优势在于可以将复杂的计算逻辑封装起来，使得模板代码更加简洁易读。
使用方法则是直接在按钮的点击事件中调用一个方法。方法可以接受参数，并且可以在方法中执行任意的逻辑操作。方法适用于那些需要执行一些特定操作或者需要进行异步操作的场景，比如发送网络请求、修改数据等。方法的优势在于可以灵活地处理各种逻辑，但是需要注意的是，每次调用方法都会执行其中的代码，不会像计算属性那样进行缓存。
综上所述，如果需要进行简单的操作或者需要灵活处理逻辑，可以使用方法；如果需要根据多个数据计算得出结果，并且希望缓存计算结果，可以使用计算属性。
以下是腾讯云相关产品和产品介绍链接地址：
- 云服务器（CVM）：提供弹性计算能力，满足各种业务需求。详情请参考：https://cloud.tencent.com/product/cvm
- 云数据库 MySQL 版（CDB）：提供高性能、可扩展的关系型数据库服务。详情请参考：https://cloud.tencent.com/product/cdb
- 云存储（COS）：提供安全可靠、低成本的云端存储服务。详情请参考：https://cloud.tencent.com/product/cos
- 人工智能机器学习平台（AI Lab）：提供丰富的人工智能算法和模型，帮助开发者快速构建智能应用。详情请参考：https://cloud.tencent.com/product/ailab
请注意，以上仅为腾讯云的部分产品，更多产品和详细信息请参考腾讯云官方网站。
相关·内容
在下面的代码中，我可以通过单击按钮来调用计算属性("edit")或方法("edit2")： methods: { console.log(this.editModestyle="float: left;" >Edit</b-button
浏览 27提问于2020-04-06得票数 1
12回答
这是否可能在Vue.Js中传递计算属性中的参数。我可以看到，当getter/setter使用计算时，它们可以接受一个参数并将其赋值给一个变量。就像来自的这里 fullName: { get: function () {
return this.firstName +fullName: funct
浏览 19提问于2016-11-10得票数 326
回答已采纳
表的每一行都与一个ID相关联。每一行都有一个按钮。我的目标很简单:当用户单击一行中的一个按钮时，这个特定的按钮应该更改为“is - goal”类，而AJAX调用应该会触发。当AJAX调用解析时，按钮应该更改为“is-success”类。
我可以很容易地在jQuery中做到这一点，但是我正在尝试
浏览 1提问于2018-06-27得票数 0
回答已采纳
1回答
当为您的Angular组件编写测试用例时，您是否应该保留生成的测试以检查组件是否已创建？例如 it(should create', () => { }); 这应该始终是测试组件功能之前的第一个测试用例，还是应该删除此测试，而只测试组件的功能，即http调用、按钮单击、页面标题
浏览 18提问于2019-07-04得票数 0
1回答
我将Vue.js与TypeScript结合使用。我有一个名为Albums.vue的组件，它正在呈现一个iFrame。当在另一个名为iFrame的组件中单击按钮时，我试图更新AlbumsLeft.vue的源URL。这将更新我的存储状态中的一个名为albumURL的属性。我遇到的</em
浏览 4提问于2020-05-20得票数 1
回答已采纳
当使用vue.js方法单击按钮时，我通过rest api加载数据。为了隐藏加载的数据，我再次单击该按钮。当我单击按钮再次显示数据时，同样的方法再次被调用，数据显示两次。}"><strong>{{ comment.answers_count }} show answers</strong></button>
</d
浏览 2提问于2020-10-12得票数 1
1回答
开始学习vue js。我不能创建模式窗口。我的问题是什么？如何链接Header.vue组件中的按钮元素和Modal.vue中的模式窗口？
浏览 19提问于2019-10-22得票数 0
回答已采纳
</template>中，有一些用于显示计算出的question对象信息的HTML元素，如question.name、question.score等。还有两个按钮，单击时会调用previousQuestion()和nextQuestion()。问题但是，即
浏览 2提问于2020-07-23得票数 0
我正在尝试测试验证是否适用于具有vee-validate和vue- test -utils的表单。我还使用nuxt并创建了一个自定义插件，该插件安装vee-validate并提供两个自定义计算属性作为混入。问题是，我需要一种在localVue实例中使用这些混合的方法，但是，我不能简单地导入整个文件，因为这会导致在主vue实例上安装两次vee-validate。我也不能只说localVue.use(MyCustomVeeValidatePlugin)，因为这个插件没有install方法(
浏览 2提问于2019-01-23得票数 1
我想在单击行中的按钮时从表行(由v-for循环生成)返回一个值("Title")，但我找不到正确的方法。我可以在单击时对值执行console.log操作，但是我不能让它在浏览器中实际返回值。当我使用{{ clicked(row) }}在我的HTML中显示返回值时，我也得到了以下错误： “未在实例上定义属性或方法”"row“”，但在呈现过程中</
浏览 58提问于2019-01-11得票数 0
回答已采纳
2回答
我使用，以便在我的应用程序中包含法语和英语：import { MLInstaller, MLCreate, MLanguage } from 'vue-multilanguage';
initial: 'english',
save: process.env.NODE
浏览 2提问于2018-08-22得票数 0
2回答
然后，如果我在视图模型中创建这个类的对象，我可以使用SampleMethod(this)。在这一点上，我并没有真正看到这个选项和在视图模型类中包含方法之间的区别。我看到的第二个选项是将每个必需的参数添加到方法中，并以元组的形式返回每个参数:在我看来，这似乎是非常cumbersome.The的第三个选项，就是使用MVVM的消息传递特性。在本例中，我可以设置视图模型<
浏览 2提问于2021-08-04得票数 0
回答已采纳
2回答
我使用Vue.js 2来显示Bootstrap模式。下面是一个例子。当用户按下left或right箭头按钮时，焦点从Always focus按钮切换到Close按钮，反之亦然。如何在每次弹出模式时使Always focus按钮始终具有焦点？或者我如何使用CS
浏览 2提问于2019-10-03得票数 1
0回答
我正在尝试调用计算属性中的方法。我的代码比较复杂，但在这个简单的示例中，调用该方法似乎不起作用：new Vue({ data: { }, return augmented(this.x); }<script src="https
浏览 1提问于2017-06-14得票数 19
回答已采纳
我的应用程序包括一个使用Laravel构建的应用程序接口，以及一个使用Vue.js和Vue Router的前端SPA。执行这些操作的页面是Vue Router路由，并在我的routes.js文件中按照正常的url方案定义：GET /tasks/:task (show以编辑任务路由为例:如果用户没有编辑
浏览 1提问于2020-05-30得票数 0
1回答
所以我有一个用Node.js & Express制作的API，运行得很好。然后我有了我的前端项目，这是一个简单的一页vue应用程序，使用vuex商店。在我的单个页面上，我有几个组件，我想在每个组件上添加一种可能性，当您以管理员身份登录时，您可以单击每个组件来编辑它们。我让它在静态元素上运行得很好：例如，这里显示的加号按钮如预期的那样。
但是，下面这个我有一些组件
浏览 3提问于2021-07-08得票数 0
回答已采纳
3回答
我真的很喜欢这种方法，但在向Vue实例添加方法和测试事件从模板中的元素触发时是否调用了这些方法时，遇到了一个障碍。对于如何模拟Vue方法，我找不到任何建议，因为如果我模拟代理方法，它就不会被调用(我使用Jest和Vue Test Utils)。我也在使用Cypress，所以我可以在e2e中填写这个测试，但我希望能够尽可能多地使用单元测试。我拥有Edd所著的“测试Vue.js
浏览 1提问于2018-12-16得票数 27
回答已采纳
我有一个计算属性不能正常工作。在阅读文档时，Vue 2.x应该这样做。<input class="input" type="file" id="file" v-on:change="setFile"></template> <script lang="js: { this.
浏览 12提问于2021-06-30得票数 0
回答已采纳
我有一个vue，它使用一个accordion表，该表在特定行被选中时显示数据。有一个“编辑”按钮，可以隐藏数据并显示表单。表单是另一个vue (将它们分开..)单击按钮即可显示表单，但是在表单内部有另一个按钮"Save“，该按钮调用一个ajax请求，然后隐藏表单并显示数据。我遇到的问题是，我似乎不知道如何从第二个vue中更新第一个vue
浏览 4提问于2017-06-21得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
