案例：动态切换图片
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue.js 示例</title> <style> .box { border: 3px solid #000000; border-radius: 10px; padding: 20px; margin: 20px; width: 200px; } h3 { margin: 10px 0 20px 0; } p { margin: 20px; } </style> </head> <body> <div id="app"> <div class="box"> <button v-show="index > 0" @click="index--">上一页</button> <div> <img :src="list[index]" alt=""> </div> <button v-show="index < 2" @click="index++">下一页</button> </div> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { index: 0, list: [ './imgs/1.png', './imgs/2.png', './imgs/3.png' ] } }) </script> </body> </html>
实现效果：
v-for
v-for 指令需要使用 (item, index) in arr 形式的特殊语法，其中：
-
item 是数组中的每一项
-
index 是每一项的索引，不需要可以省略
-
arr 是被遍历的数组
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue.js 示例</title> <style> .box { border: 3px solid #000000; border-radius: 10px; padding: 20px; margin: 20px; width: 200px; } h3 { margin: 10px 0 20px 0; } p { margin: 20px; } </style> </head> <body> <div id="app"> <div class="box"> <h3>sx水果店</h3> <ul> <li v-for="item in list"> {{ item }} </li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { list: ['西瓜','苹果','鸭梨'] } }) </script> </body> </html>
v-for中的key
语法： key="唯一值"
作用：给列表项添加的唯一标识。便于Vue进行列表项的正确排序复用。
为什么加key：Vue 的默认行为会尝试原地修改元素（就地复用）
<ul> <li v-for="(item, index) in booksList" :key="item.id"> <span>{{ item.name }}</span> <span>{{ item.author }}</span> <button @click="del(item.id)">删除</button> </li> </ul>
v-model
双向绑定指令:
-
数据改变后，呈现的页面结果会更新
-
页面结果更新后，数据也会随之而变
作用： 给表单元素（input、radio、select）使用，双向绑定数据，可以快速 获取 或 设置 表单元素内容
语法：v-model="变量"
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue.js 示例</title> <style> .box { border: 3px solid #000000; border-radius: 10px; padding: 20px; margin: 20px; width: 200px; } h3 { margin: 10px 0 20px 0; } p { margin: 20px; } </style> </head> <body> <div id="app"> <div class="box"> 账户: <input type="text" v-model="username"> <br><br> 密码：<input type="password" v-model="password"> <br><br> <button @click="login">登录</button> <button @click="reset">重置</button> </div> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { username: '', password: '' }, methods: { login() { alert(`用户名: ${this.username}\n密码: ${this.password}`); }, reset() { this.username = ''; this.password = ''; } } }) </script> </body> </html>
<input type="text" v-model="username">: 使用v-model双向绑定输入框的值与 Vue 实例中的username数据。<input type="password" v-model="password">: 使用v-model双向绑定输入框的值与 Vue 实例中的password数据。<button @click="login">登录</button>: 绑定点击事件处理器login方法。<button @click="reset">重置</button>: 绑定点击事件处理器reset方法。data: 定义了组件的数据，包含username和password。methods: 定义了组件的方法。login(): 当用户点击“登录”按钮时，会弹出一个包含用户名和密码的警告框。reset(): 当用户点击“重置”按钮时，会清空用户名和密码输入框
