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

VUE 当input或者一个变量发生改变时执行一个对应的方法，具体如下：`_.debounce` 是一个通过 Lodash 限制操作频率的函数。`_.debounce` 函数 (及其近亲 `_.throttle`) 的知识，请参考：https://lodash.com/docs#debounce<!DOCTYPE html><html lang="en"><meta

江小白写bug

3956人浏览 · 2020-06-20 17:17:08

江小白写bug · 2020-06-20 17:17:08 发布

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>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^