案例：动态切换图片
<!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(): 当用户点击“重置”按钮时，会清空用户名和密码输入框
本文转载自: https://blog.csdn.net/m0_66011019/article/details/140755022
版权归原作者 元气满满的热码式 所有， 如有侵权，请联系我们删除。
版权归原作者 元气满满的热码式 所有， 如有侵权，请联系我们删除。