4 Vue - 基础3
1 v-for
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue</title> <!-- 引入vue --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <style> .active{ border: 1px solid red; } </style> </head> <body> <div id="app"> <div> <table border="1" > <tr> <th>标题</th> <th>内容</th> </tr> <!-- v-for: 遍历 --> <tr v-for="(item,index) in blogs"> <td>{{ item.title }}</td> <td>{{ item.content }}</td> </tr> </table> </div> <div> <ul> <li v-for="(item,index) in address"> {{ index }} {{ item }} </li> </ul> <div> <ol> <li v-for="item in address"> {{ item }} </li> </ol> </div> </div> <p> <input type="button" @click="addAddr" value="添加"> </p> <p> <input type="button" @click="removeAddr" value="移除"> </p> </div> <script> var app = new Vue({ // 创建 Vue 应用 el: '#app', // 挂载点，挂载元素 data: { // 数据（响应式） blogs: [ {title: 'title1',content: 'content1'}, {title: 'title2',content: 'content2'}, {title: 'title3',content: 'content3'} ], address: ["北京", "上海", "广州", "深圳"] }, methods: { addAddr(){ // 添加元素 this.address.push("天津"); }, removeAddr(){ // 移除元素 this.address.shift(); } }, }) </script> </body> </html>
2 键盘事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue</title> <!-- 引入vue --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <style> .active{ border: 1px solid red; } </style> </head> <body> <div id="app"> <p> {{ msg }} </p> <p> <!-- @keyup.enter 事件修饰符enter --> <input type="button" value="带参数的方法" @click="doIt('lizi', 666)" @keyup.enter="doIt('enter', 666)"> </p> </div> <script> var app = new Vue({ // 创建 Vue 应用 el: '#app', // 挂载点，挂载元素 data: { // 数据（响应式） msg: "......." }, methods: { // 带参数的方法 doIt(s1, s2) { // 添加元素 this.msg = s1 + s2; }, } }) </script> </body> </html>
3 v-model 表单元素双向绑定
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue</title> <!-- 引入vue --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <style> .active{ border: 1px solid red; } </style> </head> <body> <div id="app"> <p> <!-- v-model 表单元素双向绑定 常用表单元素：https://blog.csdn.net/jnshu_it/article/details/85370309 --> <input type="text" v-model="msg" @keyup.enter="getMsg"> {{ msg }} </p> <p> <input type="button" @click="setMsg" value="设置msg"> </p> </div> <script> var app = new Vue({ // 创建 Vue 应用 el: '#app', // 挂载点，挂载元素 data: { // 数据（响应式） msg: "编辑页面带入的值" }, methods: { getMsg(){ alert(this.msg); }, setMsg(){ this.msg = "lizi test"; } } }) </script> </body> </html>
浙公网安备 33010602011771号