vue 值发生改变时执行函数，重点（_.debounce）

最新推荐文章于 2024-09-04 13:47:25 发布

江小白写bug

最新推荐文章于 2024-09-04 13:47:25 发布

阅读量3.9k

点赞数 1

分类专栏： VUE HTML

本文链接：https://blog.csdn.net/qq_25623257/article/details/106874959

版权

HTML 同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

VUE

9 篇文章 1 订阅

订阅专栏

VUE 当input或者一个变量发生改变时执行一个对应的方法，具体如下：

`_.debounce` 是一个通过 Lodash 限制操作频率的函数。
`_.debounce` 函数 (及其近亲 `_.throttle`) 的知识，
请参考：https://lodash.com/docs#debounce

<!DOCTYPE html>
<html lang="en">
<meta name="viewport" content="width=device-width">
<!-- 引入样式文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.2/lib/index.css">

<!-- 引入 Vue 和 Vant 的 JS 文件 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vant@2.2/lib/vant.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>
<!-- 引入 阿里Iconfont图标 JS 文件 -->
<script src="//at.alicdn.com/t/font_1501305_2sb8mt25553.js"></script>

</head>
<body>
	<div id="app">
		<input v-model="textValue" type="text" name="textValue">    
	</div>
</body>
	<script>
	  // 在 #app 标签下渲染一个按钮组件
	  var vm = new Vue({
	    el: '#app',
	    data:{
	    	textValue:'1000122'
	    },
		methods: {
			// `_.debounce` 是一个通过 Lodash 限制操作频率的函数。
		    // `_.debounce` 函数 (及其近亲 `_.throttle`) 的知识，
		    // 请参考：https://lodash.com/docs#debounce
			updateValue: _.debounce(function(){
				console.log(this.textValue);
			},500)
		},
		 watch: {
		    // 如果 `textValue` 发生改变，这个函数就会运行
		    textValue: function (newQuestion) {
		      this.updateValue();
		    }
		  }
	  });
	// 调用函数组件，弹出一个 Toast
	  vant.Toast('欢迎使用');
</script>
</html>