如何在vuejs中修改页面时触发函数
在Vue.js中，可以通过使用watch属性或者使用计算属性来实现在页面修改时触发函数的效果。
- 使用watch属性：
在Vue组件中，可以使用watch属性来监听数据的变化，并在数据变化时触发相应的函数。具体步骤如下：
- 在Vue组件的data选项中定义需要监听的数据。
- 在Vue组件的watch选项中添加一个与需要监听的数据同名的属性，并指定一个处理函数。
- 在处理函数中编写需要执行的逻辑。
- 示例代码如下：
- 示例代码如下：
- 使用计算属性：
在Vue组件中，可以使用计算属性来根据数据的变化动态计算出一个新的值，并在计算属性的getter函数中执行相应的逻辑。具体步骤如下：
- 在Vue组件的data选项中定义需要监听的数据。
- 在Vue组件的computed选项中添加一个与需要监听的数据相关的计算属性，并指定一个getter函数。
- 在getter函数中编写需要执行的逻辑。
- 示例代码如下：
- 示例代码如下：
以上两种方法都可以实现在Vue.js中修改页面时触发函数的效果。具体选择哪种方法取决于具体的需求和场景。
相关·内容
4回答
VueJs，计算属性和观察者的区别？
vue.js、vuejs2
在Vue.js文档中有一个例子，如下所示：
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
},
watch: {
firstName: function (val) {
this.fullName = val + ' ' + this.lastName
},
lastName: function (
浏览 4提问于2017-04-07得票数 60
回答已采纳
2回答
用于监视Vue中计算属性的反应性触发器
vue.js
通常，在使用Vue时，只有当该属性的值发生变化时，才会触发监视属性的回调。但是，一位同事注意到，在观察计算属性时，这种情况似乎不成立，如以下示例所示：
<div id = "demo">
{{ numbers }} </br>
{{ evenNumbers }}
</div>
<script src="./vue.js"></script>
<script>
var demo = new Vue({
el: '#demo',
data
浏览 2提问于2018-10-03得票数 1
回答已采纳
2回答
为什么观察者比计算机更好地执行异步或昂贵的操作来响应vue.js中不断变化的数据？
javascript、vue.js、vuejs2
Vue.js的文档显示：
使用watch选项，我们可以执行异步操作(访问API)，限制执行该操作的频率，并在得到最终答案之前设置中间状态。对于computed属性，所有这些都是不可能的。
在同一页上，我们可以看到computed属性使用与watcher相同的函数。
参考：
因此，我的问题是，支持上述语句或限制我们使用computed属性而不是watchers的技术原因是什么？
浏览 4提问于2020-08-30得票数 4
回答已采纳
2回答
如何在vue计算中更新数据本身？
vue.js
在我的例子中，我希望在computed中更新数据本身。如下例所示：
var example = new Vue({
el: '#example',
data: {
Foo: []
},
computed: {
Bar: {
// getter
get: function(){
return
浏览 1提问于2020-06-11得票数 0
1回答
vuejs 2如何在使用params时从vuex观察存储值
vue.js、vuejs2、vuex
当使用params时，如何监视存储值的变化？我通常会通过getter这样做，但是我的getter接受一个param，这使得它变得很棘手，因为我没有找到关于这个场景或堆栈Q/A的文档。
(由于演示原因，代码被最小化)我的store.js：
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
let report = {
results: [],
};
export const store = new Vuex.Store({
state: {
bro
浏览 1提问于2018-08-25得票数 3
回答已采纳
2回答
VUE 3-观察不返回正确的值
javascript、vue.js、vuejs3
在Vue 3应用程序中，我引用store getter并观察其值的变化来做一些逻辑。 我需要比较新旧的值。但是，对于传递给watch函数的每个参数，我都得到了相同的值。 下面是我的设置： <script>
import { useStore } from 'vuex'
import { watch } from 'vue'
export default {
setup() {
const store = useStore()
let text = store.getters['SOME_ARRAY']
浏览 46提问于2020-12-30得票数 4
回答已采纳
3回答
vuejs如何知道用于缓存的计算属性的依赖项？
javascript、vue.js、vuejs2
我有一个Vue.js代码：
new Vue({
data:{
myValue:'x',
myOtherValue:'y'
},
computed: {
myComputed: myFunction(){
return this['my' + 'Value']
}
}
})
如您所见，计算的属性将被缓存，并且它仅依赖于data.myValue。我的问题是，Vue.js缓存系统如何知道只有当myValue被更改时才能再次运行计算函数？
浏览 3提问于2017-01-09得票数 42
回答已采纳
1回答
将数据重置为原始值
javascript、vue.js、vuejs2
在我的应用程序中，我的数据中有很多属性，当我点击一个按钮时，我需要将数据重置为原始值，因为我在应用程序中操作它们，有没有合适的方法将数据值转换为原始值？
data: {
showStart: true,
isYouAttack: true,
valueMonster: 100,
valueYou: 100,
monsterProgress: 500,
youProgress: 500,
alerts: [],
progressMonster: {
浏览 3提问于2017-03-09得票数 1
1回答
Vuejs在更改时监视动态数组元素
arrays、vuejs2
我正在创建这个文本编辑器，其中包含name和address字段 <ckeditor :editor="editor" v-model="data[index].name">
<ckeditor :editor="editor" v-model="data[index].address.1">
<ckeditor :editor="editor" v-model="data[index].address.2"> 和data属性 data() {
retu
浏览 25提问于2021-04-21得票数 0
回答已采纳
3回答
试图理解这种Vue反应性不一致
vue.js、vue-reactivity
我很困惑..。给出以下两个示例：
示例1：
new Vue({
el: "#app",
data: {
message: "Hello!",
myPropInternal: 0,
},
computed: {
myProp: {
// getter
get: function () {
console.log('get', this.myPropInternal);
return this.myPropInternal;
},
//
浏览 4提问于2021-05-14得票数 1
1回答
(引导) Vue Datepicker:如何定义开始日期和结束日期，以便结束日期不能在开始日期之前？
javascript、vue.js、datepicker、bootstrap-vue
我在Vue.js中有两个Vue.js的表格。我想实现一个假日管理器，这样您就可以定义假期的开始(输入-3)和结束日期(输入-4)。结束日期应大于或等于开始日期。我目前的实现如下：
<b-form-group
id="input-group-3"
label="Anfangsdatum:"
label-for="input-3"
>
<b-form-datepicker
id="input-3"
v-model="von"
pl
浏览 3提问于2020-12-08得票数 0
回答已采纳
1回答
访问计算VueJS的前一个值
vue.js、vuejs2
当某些信息发生变化时，我使用计算来检查。
当我单击并运行计算时，我可以看到数据中的新值和分配给计算函数的旧值。这个值可以通过Chrome Vue Dev工具看到。
我想要做的是访问计算保存的数据，而不是返回。这是以前正确的数据，但计算更新了内部的返回。
我想这样做的原因是为了表明数据不再匹配，而且有些东西已经改变了。
selectedLenses: "30626146713652" <-- Data
changeSelectedLenses: "28717846790196" <-- Computed
单击运行计算函数的按钮，该按钮将更改为：
sel
浏览 1提问于2020-02-21得票数 5
回答已采纳
1回答
当数组在对象内部时，如何使用监视？
vue.js
我在对象内部有数组
Vue.component('greeting', {
template: '<button @click="cool">getdate! </button> ',
data :function () {
return {
message:"15/10/1999",
}
},
methods:{
cool(){
this.$parent.in
浏览 0提问于2018-12-18得票数 1
回答已采纳
2回答
组件，将计算的属性分配给数据。
javascript、vue.js、local-storage、computed-properties
我正在尝试将组件的数据设置为计算的属性值，因为这会获取一些localStorage数据并稍微对其进行操作。
然后，一旦组件被挂载，侦听localStorage中的更改，如果我的键被更新，那么再次获取这个值，通过我的计算属性运行它，并将它传回视图。
但是，我得到了以下错误：
ReferenceError: ids is not defined
at a.render (vue.js:4)
at a.e._render (vue:6)
at a.r (vue:6)
at un.get (vue:6)
at new un (vue:6)
at vue:
浏览 2提问于2019-02-20得票数 3
回答已采纳
2回答
是什么导致计算Vue计算属性？
javascript、vuejs2、vue-component
我对计算属性的理解是，如果没有在模板中使用计算属性，则不应该计算。但是，当存在计算属性的观察者时，将对此计算属性进行计算。
我理解它并不是理想的应用程序体系结构，但我的问题是，它的工作方式是否是一种预期的Vue行为，还是目前如何实现的某种副作用，以及在将来的版本中是否会发生变化？
或者说，如果计算的属性没有在模板中使用，并且它在代码基中没有其他显式的getter，那么是否应该对它进行评估？
示例：
<template>
<div>
<button @click="counter++">+1</button>
浏览 0提问于2021-09-14得票数 0
回答已采纳
4回答
Vue："_“前缀属性不适用于数据属性
javascript、vue.js
我正在尝试将计算的属性设置为Vue.js中的子组件的支柱。
这是组件代码()的摘录：
<div id="app">
<show-me :title="aTitle"></show-me>
</div>
const ShowMe = {
data() {
return {
_title: null
}
},
computed: {
title: {
set: function(val) {
this._title = val;
浏览 2提问于2019-11-18得票数 1
回答已采纳
1回答
什么叫缺少手表表情？
angularjs
新手，我读了的文件。$watch的语法是
$watch(watchExpression, [listener], [objectEquality], [deregisterNotifier]);
但我看到的例子如下所示。
var food;
scope.foodCounter = 0;
expect(scope.foodCounter).toEqual(0);
scope.$watch(
// This is the listener function
function() { return food; },
// This is the change handler
function
浏览 0提问于2014-07-18得票数 2
回答已采纳
1回答
Vue.js/Vuex:调用getter vs直接访问create生命周期钩子上的状态值
javascript、vue.js、vuex
我使用vue.js中创建的生命周期挂钩将数据从存储区加载到vue组件的数据中。我注意到this.selectedType = store.state.selectedType成功地从存储区加载数据。但是，如果我使用getter从存储加载(即this.selectedType = store.getters.getType())，则会得到以下错误：
Error in created hook: "TypeError: Cannot read property 'selectedType' of undefined"
我不明白为什么它说selectedType是未定
浏览 1提问于2018-11-23得票数 2
回答已采纳
2回答
为什么vue.js计算结果未定义
javascript、vue.js
我只想使用Vue computed，但我得到了undefined(styleObj.width)，并且似乎没有调用计算函数(没有日志‘计算’)。当我更改数据时，计算函数仍然没有被调用，数据(styleObj.width)仍然是undefined。
代码很简单，我希望你知道我在说什么。
<!DOCTYPE html>
<html>
<head>
<script src="http://vuejs.org/js/vue.js"></script>
<meta charset="utf-8&
浏览 0提问于2019-08-19得票数 1
回答已采纳
1回答
如果赋值为空，则Vue将计算属性设置为empty
javascript、vuejs2
在下面的代码中，我尝试设置计算字段的属性。由于我还希望能够为computed属性赋值，因此我在SelectedType computed中定义了一个set函数。
但是当计算属性设置为空数组时。计算属性设置了以前的数据，但未更新。
就像我在第一个uid类型的updateSubscription方法中执行this.SelectedType = reduced时，值与selectedPaymentType中的值一样好，但是在uid==2中，SelectedType应该是空的。但它获取的是先前选择的值。
当返回的数组为空时，如何将SelectedType设置为空？在这种情况下，应该采取什么解决方法？
浏览 5提问于2021-06-17得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
