Vue学习之v-model使用
1、打开WebStorm开发工具，新建‘test.html’文件，将vue.js放入同个目录内，并引入到页面。<script type="text/javascript" src = "vue.js"></script>
2、在body内添加form标签，v-model只能用在form标签中，代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <script type="text/javascript" src = "vue.js"></script> <title>Title</title></head><body> <form id="app"> <input type="text" v-model="msg"> <p>{{msg}}</p> </form> <script> var vue = new Vue({ el : "#app", data:{ msg: "", } }) </script></body></html>
3、打开页面，在input内输入内容，会在p标签中同步显示，这就是v-model的基本特性
4、将input标签改为复选框，可以多选，代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <script type="text/javascript" src = "vue.js"></script> <title>Title</title></head><body> <form id="app"> <input type="checkbox" id="jack" value="Jack" v-model="msg"> <label for="jack">Jack</label> <input type="checkbox" id="john" value="John" v-model="msg"> <label for="john">John</label> <input type="checkbox" id="mike" value="Mike" v-model="msg"> <label for="mike">Mike</label> <p>您的选择是{{msg}}</p> </form> <script> var vue = new Vue({ el : "#app", data:{ msg: [], } }) </script></body></html>
5、打开页面，点击复选框内容时，会在p标签的数组中显示
6、将input标签改为单选框，代码如下：<!DOCTYPE html>挢旗扦渌;<html lang="髫潋啜缅en"><head> <meta charset="UTF-8"> <script type="text/javascript" src = "vue.js"></script> <title>Title</title></head><body> <form id="app"> <input type="radio" id="one" value="One" v-model="msg"> <label for="one">One</label> <br> <input type="radio" id="two" value="Two" v-model="msg"> <label for="two">Two</label> <p>您的选择是{{msg}}</p> </form> <script> var vue = new Vue({ el : "#app", data:{ msg: "", } }) </script></body></html>
7、打开页面，点击单选框内容时，会在p标签的中显示
