vue 2.0子组件通过input 表单v-model进行绑定，如何实现不影响props的值和父元素？ - 知乎8被浏览1287分享邀请回答0添加评论分享收藏感谢收起vue.js对表单值初始化
新建表单有些input输入框需要默认值，比如性别需要一个男或女默认值。再比如一个日期选择框需要默认今天。如果按照HTML的方式设置不会起作用
&input type="radio" name="gender" value="0" checked="checked"
v-model="gender"&男
&input type="radio" name="gender" value="1" v-model="gender"&女
&input type="date" value=""
v-model="date"&
在vue.js页面中上面这种设置方式是不会起作用的,性别不会选中，日期也不会有值。解决办法是对v-model属性设值，在初始化时给gender=0，那么默认会选中性别男，给date=""日期控件也有值。
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。vuejs—数据双向绑定 - 简书
vuejs—数据双向绑定
，介绍了如何通过vue.js实现页面输出hello vue.js，这篇文章将介绍如何通过其实现数据双向绑定
我们有这样一个需求，文本框中输入什么内容，文本框中的内容就显示在页面上。
你会说，这个很简单，我只要监听文本框内容改变事件就可以实现了。
但是这里的需求只是修改一处，如果文本框内容改变后需要同时修改20个地方的显示呢？
那得执行大量的DOM操作。
vue.js是MVVM结构的，同类的还有AngularJs；至于MVC、MVP、MVVM的比较网上已经有很多了，这样不再重复，我介绍肯定也没网上大神们介绍的详细，大家可以自行百度，谷歌。
什么？在墙内谷歌不了，那我推荐你一个软件，不需要任何配置，只需要双击运行，支持MAC、Windows、Unbuntu、Android，真的很好用， 。
废话不多说，来看代码：
&!DOCTYPE html&
&html lang="en"&
&meta charset="UTF-8"&
&meta name="viewport" content="width=device-width, initial-scale=1"&
&meta http-equiv="x-ua-compatible" content="ie=edge"&
&title&demo01&/title&
&link rel="stylesheet" href="../css/base/bootstrap.min.css"&
&link rel="stylesheet" href="../css/base/common.css"&
&div class="container mt15"&
&fieldset class="form-group" id="unameGroup"&
&label for="userName"&名字：&/label& &span id="title"&{{ uname }}&/h1&
&input type="text" class="form-control" id="userName" placeholder="请输入名字" v-model="uname"&
&/fieldset&
&script src="../js/base/vue.js"&&/script&
&script src="../js/base/jquery.min.js"&&/script&
&script src="../js/base/bootstrap.min.js"&&/script&
el: '#unameGroup',
页面初始化效果：
页面初始效果.png
修改文本框内容：
改变文本框内容1.png
改变文本框内容2.png
这里的span标签以及文本框必须包含在id为unameGroup的容器中，俗话说就是得在这个“作用域内”，不然没有效果。
input上不是value={{uname}}，而是v-model="uname"
下一篇文章将学习如何渲染列表。
每个人有每个人的选择，不要随意评价。个人站点：/
掘金主页：https://gold.xitu.io/user/56cc5478816dfa
python博客：http://blog.csdn.net/pythonyin?viewmode=contents问题： (vue.js)Vue为什么不能给普通的元素加上v-model实现双向绑定，只能使用表单元素的双向绑定
描述:Vue为什么不能给普通的元素加上v-model实现双向绑定，只能使用表单元素的双向绑定解决方案1:可以用免费的奇云测，也能帮到一些忙解决方案2:双向绑定，就是后台数据与界面数据保持一致，前台修改映射到后台。普通元素并不会修改值，其只能显示值，显示值的功能已经有{{}}与v-text可以实现了如果给普通元素使用双向绑定，那么你要修改前台的值，你唯一的途径是使用js直接操作，这就和vue的设计不相符了，vue提供给我们它封装的方法去渲染界面，避免我们直接操作dom去渲染。我也刚开始学，个人理解解决方案3:普通元素没有“输入”这个功能，从而无法从界面上进行修改，自然也谈不上双向绑定了
以上介绍了“ (vue.js)Vue为什么不能给普通的元素加上v-model实现双向绑定，只能使用表单元素的双向绑定”的问题解答，希望对有需要的网友有所帮助。
本文网址链接：/itwd/3285500.html
上一篇： 下一篇：问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
目的： 单选列表里的某一项被选中时，数据相应地变化； 被取消选择时还原。
对于radio（相同的name组）来说，是选中另外一个radio；
类似地，其他表单元素在循环中，v-model的值如何确定呢，如果安装这种思路。
（见笑，以下代码无法实现，循环中的$index，在v-modle貌似无效）
&ul id="test"&
&li v-for="item in address"&
&input type="radio" name="address" v-model="address_$index" value="true" /&
{{address_$index ? "selected" : ""}}
&!-- 其他数据变化，当被选中或取消 --&
&span&{{item.name}}&/span&
el: "#test",
"address": [
{ "name": "test#1"},
{ "name": "test#2"},
{ "name": "test#3"},
{ "name": "test#4"}
具体执行效果 见
代码示例。
另外一个想法是在input上绑定事件，如 v-on:change="selecteItem($index,$event)"
求万能的 segmentfault 给一个思路。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
粗略写了个DEMO,不知道是不是你想要的:
同步到新浪微博
分享到微博？
你好！看起来你挺喜欢这个内容，但是你还没有注册帐号。 当你创建了帐号，我们能准确地追踪你关注的问题，在有新答案或内容的时候收到网页和邮件通知。还能直接向作者咨询更多细节。如果上面的内容有帮助，记得点赞 (????)? 表示感谢。
明天提醒我
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：}