JavaScript: 练习 Vue.js
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> </head> <body> <div id='app'> <span>{{message}}</span><br> <span v-bind:title="title">鼠标悬停查看</span><br> <a v-bind:href="url">链接</a><br> <p v-if="istrue1">v-if is True</p> <p v-else-if="istrue2">v-else-if is True</p> <p v-else>v-if and v-else-if are not True</p> <p v-show="isshow">v-show is True</p> <button v-on:click="counter += 1">加1 {{counter}} clicked</button> <br><br> <button v-on:click="add">Add 1</button> <p>The button above has been clicked {{counter2}} times!</p> <button v-on:click="add2(n)">加 {{n}} 结果:{{counter3}}</button> <ol> <li v-for="(item,index) in lists"> {{item.text}}--{{index}} </li> </ol> <br> <ol> <li v-for="value in object"> {{value}} </li> </ol> <br> <ol> <li v-for="item in listObjects"> {{item.name}}--{{item.age}}--{{item.gender}} </li> </ol> <br> <table> <tr> <td>用户名:</td> <td><input type="text" v-model="username"></td> </tr> <tr> <td>密码:</td> <td><input type="password" v-model="password1"></td> </tr> <tr> <td>确认密码:</td> <td><input type="password" v-model="password2"></td> </tr> <tr> <td> 性别: </td> <td> 男<input type="radio" name="gender" value="male" v-model="gender"> 女<input type="radio" name="gender" value="female" v-model="gender"> </td> </tr> <tr> <td> 爱好: </td> <td> 足球<input type="checkbox" name="hobby" value="Soccer" v-model="hobby"> 篮球<input type="checkbox" name="hobby" value="Basketball" v-model="hobby"> 排球<input type="checkbox" name="hobby" value="Volleyball" v-model="hobby"> </td> </tr> <tr> <td> 城市: </td> <td> <select name="city" v-model="city"> <option value="北京">北京</option> <option value="上海">上海</option> <option value="广州">广州</option> </select> </td> </tr> <tr> <td> 简介: </td> <td> <textarea name="desc" v-model="desc"></textarea> </td> </tr> </table> <button v-on:click="register">注册</button> <ol> <li v-for="(value,key) in info"> {{key}}:{{value}} </li> </ol> </div> </body> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { message: "hello world!", title: '页面加载于 ' + new Date().toLocaleString(), istrue1: false, istrue2: false, url: 'https://www.baidu.com', isshow: true, counter: 0, counter2: 0, n: 2, counter3: 0, username: '', password1: '', password2: '', gender: '', hobby: [], city: '', desc: '', info: '', lists: [ {text: 'item1'}, {text: 'item2'}, {text: 'item3'}, ], listObjects: [ { name: 'Name1', age: 'Age1', gender: 'Gender1', }, { name: 'Name2', age: 'Age2', gender: 'Gender2', }, { name: 'Name3', age: 'Age3', gender: 'Gender3', }, ], object: { title: 'Title', author: 'Author', date: 'Date', } }, methods: { add: function () { this.counter2 += 1 }, add2: function (num) { this.counter3 += num alert(this.counter3) }, register: function () { this.info = { username: this.username, password1: this.password1, password2: this.password2, gender: this.gender, hobby: this.hobby, city: this.city, desc: this.desc, } } } }) </script> </html>
##########################################################
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> </head> <body> <div id="app"> <input type="text" v-model="newItem"> <button v-on:click="addNewItem">添加</button> <br> <ul> <li v-for="(item,index) in items">{{item}} <a href="javascript:;" v-on:click="deleteItem(index)">删除</a></li> </ul> </div> </body> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { items: [ 'item1', 'item2', 'item3', ], newItem: '', }, methods: { addNewItem: function () { this.items.push(this.newItem); this.newItem = ''; }, deleteItem: function (index) { this.items.splice(index,1) } } }) </script> </html>