zoukankan      html  css  js  c++  java
  • Vue数据绑定隐藏的神坑....

    今天被Vue的一个坑给折磨了一天,终于发现是什么问题,我们先来模拟一个场景:
    代码如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>vue</title>
    </head>
    <body>
    	<div id="app">
    		<input type="text" v-model='sendJson.name'>
    		<button @click='showName'>打印输入框的值</button>
    	</div>
    	<script type="text/javascript" src='./vue.min.js'></script>
    	<script type="text/javascript">
    	new Vue({
    		el:'#app',
    		data(){
    			return{
    				sendJson:{}
    			}
    		},
    		methods:{
    			showName(){
    				console.log(this.sendJson.name)
    			}
    		}
    	});
    	</script>
    </body>
    </html>
    

    我们进页面就点按钮,你猜会输出什么?

    是undefined,不算奇怪,你什么都没输入,当然是undefined了。

    OK,接下来刷新页面,进去多一步操作,先点击一下input输入框,在点击按钮,只是多做这一步操作:

    输出的是空白,在chrome中空白就代表空字符串,可以修改一下打印结果:console.log(this.sendJson.name === "")

    其实这看起来不是个大问题,但是在我的场景里问题就大了。

    我要把输入框内的值作为一个对象的属性,问题就来了,看图:

    这个坑牛逼不,我真是个奇葩。

  • 相关阅读:
    selenium+python处理Alert弹窗
    HTML在网页上不能显示图片问题
    制作python程序windows安装包(飞机大战源码)
    python读取ini文件
    python杀死Windows后台程序
    python3中文乱码解决方法
    算法04
    Windows10
    Windows10 快捷键
    文件夹选项-安装功能-window服务
  • 原文地址:https://www.cnblogs.com/chinajins/p/6122722.html
Copyright © 2011-2022 走看看