Vuejs一个小坑，v-model绑定input，js操作value数据不响应

最新推荐文章于 2024-05-16 11:50:05 发布

alisaGreen

最新推荐文章于 2024-05-16 11:50:05 发布

阅读量3.8w

点赞数 2

分类专栏： vue

vue 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

为了和再iview 第十点中分享的东西https://blog.csdn.net/bluefish_flying/article/details/80936954
（在iview中实现在dateTime类型的时间控件在选择了时分秒的时候输入框展示年月日时分秒的格式，但是如果没有选择时分秒的情况下只展示年月日）
做区别，这里同时转载了另外一个问题

新手碰到的一些坑，也只能解决新手一些问题，因为我刚入门，也是直接那项目直接入门的，没时间学组件的写法，中间遇到了挺多坑的。

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<script src="vue.js"></script>
	</head>

	<body>
		<hr>
		<div id="example">
			<input type="text" id="input" v-model="inputVal">
			<button @click="setVal">通过vm改变值(vm改变后)</button>
			<button id="btn">设置value cc</button>
		</div>
		<div class="vin">
		</div>
		<script>
			var input = document.querySelector("#input"),
				oBtn = document.querySelector("#btn");
			var app = new Vue({
				el: "#example",
				data: {
					inputVal: "初始值"
				},
				methods: {
					setVal: function() {
						//app.$set("inputVal","vm改变后");
						this.inputVal = "vm改变后";
						app.$log("inputVal");
					}
				}
			})
			oBtn.onclick = function() {
				//input.focus();
				input.value = 222;
				console.log(app.$data);
			}
		</script>
	</body>

</html>

input输入框绑定到vue。我通过其他方式设置input.value时无法响应(vue混合jq插件或者自己写的插件时会有这种情况)，用vue提供的$set也没有办法响应数据，后来发现input.focus();也就是先聚焦一下就有用，因为用了日历插件发现的。可以把代码拷到编辑器体验下看

转自：http://www.luuxii.com/674.html

alisaGreen

关注

2
点赞
踩
9

收藏

觉得还不错? 一键收藏
2
评论
Vuejs一个小坑，v-model绑定input，js操作value数据不响应

为了和再iview 第十点中分享的东西https://blog.csdn.net/bluefish_flying/article/details/80936954（在iview中实现在dateTime类型的时间控件在选择了时分秒的时候输入框展示年月日时分秒的格式，但是如果没有选择时分秒的情况下只展示年月日）做区别，这里同时转载了另外一个问题新手碰到的一些坑，也只能解决新手一些问题，因为我刚...
复制链接

扫一扫