今天被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 === "")

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

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

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

Vue数据绑定隐藏的神坑....的更多相关文章

  1. Vue数据绑定

    gitHub地址:https://github.com/lily1010/vue_learn/tree/master/lesson04 一 双括号用来数据绑定 (1)写法一: {{message}}, ...

  2. 浅析vue数据绑定

    前言:最近团队需要做一个分享,脚进脑子,不知如何分享.最后想着之前一直想研究一下 vue 源码,今天刚好 "借此机会" 研究一下. 网上研究vue数据绑定的文章已经非常多了,但是自 ...

  3. Vue数据绑定和响应式原理

    Vue数据绑定和响应式原理 当实例化一个Vue构造函数,会执行 Vue 的 init 方法,在 init 方法中主要执行三部分内容,一是初始化环境变量,而是处理 Vue 组件数据,三是解析挂载组件.以 ...

  4. 17: VUE数据绑定 与 Object.defineProperty

    VUE数据绑定原理:https://segmentfault.com/a/1190000006599500?utm_source=tag-newest Object.defineProperty(): ...

  5. Vue数据绑定(一)

    Contents Vue作为当下炙手可热的前端三大框架之一,一直都想深入研究一下其内部的实现原理,去学习MVVM模式的精髓.如果说MVVM是当下最流行的图形用户界面开发模式,那么数据绑定则是这一模式的 ...

  6. (三)vue数据绑定及相应的命令

    vue数据绑定及相应的命令 {{ Text }} 双括号进行数据渲染 动态绑定数据 例如:{{message}} data: { return{ message: 'Hello Vue!' } } 2 ...

  7. 「每日一题」有人上次在dy面试，面试官问我：vue数据绑定的实现原理。你说我该如何回答？

    关注「松宝写代码」,精选好文,每日一题 ​时间永远是自己的 每分每秒也都是为自己的将来铺垫和增值 作者:saucxs | songEagle 来源:原创 一.前言 文章首发在「松宝写代码」 2020. ...

  8. 怎样在vue中隐藏el-form-item中的值、设置输入框的值是只读

    1.如何在前端vue中隐藏某一个元素(el-form-item怎样隐藏) 给每项表单项添加一个自己的id名,并用v-model绑定相对应的数据,利用v-if根据上一个表单项的数据值来进行显示或隐藏 & ...

  9. [转]vue数据绑定(数据,样式,事件)

    1.mounted 与 methods 与 computed 与 watched区别 From:https://blog.csdn.net/qinlulucsdn/article/details/80 ...

随机推荐

  1. timus_1007_bfs

    图像编码 题目描述: 有这样一副图,它有黑白像素,黑像素的坐标在1-10之间.有很多种方法来编码这个图.例如下面的图: 一种表示方法是只描述黑像素,并按x坐标的增序描述,如果x相同,则按y的增序描述, ...

  2. Example of BeanFactoryAware in Spring--转

    原文地址:http://www.concretepage.com/spring/example_beanfactoryaware_spring If a bean in spring implemen ...

  3. JavaScript作用域原理（三）——作用域根据函数划分

    一.一个for实例 <p id="scope3" style="color:red"></p> var pscope3 = docume ...

  4. 百度地图JavaScript API自定义覆盖物、自定义信息窗口增删时的显示问题

    项目中,需求:在百度地图上实时画出车辆,并能点击车辆弹出信息框查看实时信息. 实现:通过不停的画覆盖物并删除掉.点击覆盖物时弹出信息窗口. 问题:删除掉覆盖物后信息窗也删除掉了.因为信息窗是建立在覆盖 ...

  5. 漫谈可视化Prefuse（一）---从SQL Server数据库读取数据

    上篇<可视化工具solo show-----Prefuse自带例子GraphView讲解>主要介绍了整个Prefuse工具集具有的一些特征.框架的运行流程,分析并展现了官方提供的例子Gra ...

  6. log4net 中错误 System.Web.HttpException (0x80004005): 文件不存在

    用日志组件,Global 中配置的输出最后一个错误信息,总是出现下面的错误信息: 2014-04-01 14:35:41,757 级别:ERROR 信息:[Exception]:System.Web. ...

  7. Elasticsearch 文件目录解释

    下载后解压的Elasticsearch中,有以下几个基本的目录: home---这是Elasticsearch解压的目录 bin---这里面是ES启动的脚本 conf---elasticsearch. ...

  8. JVM Tomcat性能实战

    本节只是介绍实战部分,具体的理论参数,请自行百度. 所需工具:linux服务器  Jmeter测试工具  xshell   一个web应用 Tomcat的JVM参数可以配置在catalina.sh,如 ...

  9. ASP.NET MVC系列:为视图添加查询功能

    首先,在MoviesController里添加一个查询方法,代码如下 public ActionResult SearchIndex(string title) { //查询数据库中的电影表 var ...

  10. c#中如何执行存储过程

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...