简介：本文旨在用最短的篇幅和例子，代入大家入门vue,也是本博主的一个学习记录，本文主要介绍的组件有，v-mind。
v-model
用法：用来绑定标记的value属性。v-model所谓的“双向绑定”：当文本框中的数据发生改变后，可以发现data中所定义的msg变量也发生了相应的改变。
1. 输入框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>v-model</title> <script src="../js/vue.js"></script> </head> <body> <div id="app"> <input type="text" v-model="name" placeholder="输入姓名..."> <p>输入姓名为：{{name}}</p> <textarea v-model="introduction" placeholder="输入介绍..." cols="40" rows="10"></textarea> <p>输入的简介为:{{introduction}}</p> </div> </body> <script> const app = new Vue({ el:"#app", data:{ name:"", introduction:"", }, methods:{ } }); </script> </html>
运行结果：
2. 单选按钮
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>单选框</title> <script src="../js/vue.js"></script> </head> <body> <div id="app"> <p>选择性别:</p> <input type="radio" v-model="gender" value="man">男 <input type="radio" v-model="gender" value="woman">女 <p>选中的性别为：{{gender}}</p> </div> </body> <script> const app = new Vue({ el:"#app", data:{ gender:"man" }, methods:{ } }); </script> </html>
运行结果：
复选框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>复选框</title> <script src="../js/vue.js"></script> </head> <body> <div id="app"> <p>选择爱好:</p> <input type="checkbox" id="reading" value="reading" v-model="hobbies"> <label for="reading">读书</label> <input type="checkbox" id="basketball" value="basketball" v-model="hobbies"> <label for="basketball">篮球</label> <input type="checkbox" id="travelling" value="travelling" v-model="hobbies"> <label for="travelling">旅游</label> <br> <p>选择的爱好为：{{hobbies}}</p> </div> </body> <script> const app = new Vue({ el:"#app", data:{ hobbies:[] }, methods:{ } }); </script> </html>
运行结果：
下拉选择框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>下拉菜单版</title> <script src="../js/vue.js"></script> </head> <body> <div id="app"> <select v-model="selectedCategory"> <option value="">选择一个类别</option> <option value="computer">电脑</option> <option value="book">图书</option> <option value="car">汽车</option> <option value="food">食品</option> </select> <p> 选择的类别是：{{selectedCategory}} </p> </div> </body> <script> const app = new Vue({ el:"#app", data:{ selectedCategory:'computer' }, methods:{ } }); </script> </html>
运行结果：
