首页 > 代码库 > Vue2学习笔记:v-model指令
Vue2学习笔记:v-model指令
1.v-model指令
<!DOCTYPE html><html><head> <title></title> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script type="text/javascript"> window.onload = function(){ var vm = new Vue({ el:‘#box‘, data:{ msg:‘Hello Vue!‘ } }); } </script></head><body> <div id="box"> <input type="text" v-model="msg"/><br/> {{msg}} </div></body></html>
Vue控制id="box"这个DIV元素，同时在 HTML模板上使用双花括号{{xxxx}}语法，来访问data中定义的数据。
通过v-model 指令，我们把msg 数据绑定到了input文本框，我们修改文本框的值，发现msg 数据改变了。
2.注意：定义的数据是数组或者json
!DOCTYPE html><html><head> <title></title> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script type="text/javascript"> window.onload = function(){ var vm = new Vue({ el:‘#box‘, data:{ msg:‘Hello Vue!‘, arr:[‘1‘,‘2‘,‘3‘], json:{a:‘a‘,b:‘b‘} } }); } </script></head><body> <div id="box"> <input type="text" v-model="msg"/><br/> {{msg}} <br/> {{arr}} <br/> {{json}} </div></body></html>
结果：
数组和json都被当作字符串输出了！
Vue2学习笔记:v-model指令
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。