案例：动态切换图片
<!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(): 当用户点击“重置”按钮时，会清空用户名和密码输入框
