vue2干货总结2（v-bind、v-for、v-model、指令修饰符、v-bind操作class和style）

一.v-bind

作用：动态的设置html的标签属性

语法：v-bind:属性名 = "表达式"

简写形式: :属性名 = "表达式"

javascript 复制代码

<body>
  <div id="app">
    <img v-bind:src="imgUrl" v-bind:title="msg" alt="">
    <img :src="imgUrl" :title="msg" alt="">
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app', 
      data: {
        imgUrl:'./images/1.jpeg',
        msg:'这是一张风景图'
      }
    })
  </script>
</body>

案例：当我点击上一页和下一页时，实现图片切换效果

javascript 复制代码

<body>
  <div id="app">
    <img :src="imgList[index]" alt="">
    <div class="btn">
      <button @click="prev" v-show="index > 0">上一页</button>
      <button @click="next" v-show="index < imgList.length-1">下一页</button>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app', 
      data: {
        imgList:['./images/1.jpeg','./images/2.jpeg','./images/3.jpeg'],
        index:0
      },
      methods:{
        prev(){
          this.index--
        },
        next(){
          this.index++
        }
      }
    })
  </script>
</body>

二.v-for

作用：基于数据循环，多次渲染整个元素

遍历数组语法:

v-for = "(item, index) in 数组" （item每一项，index下标，index可以省略）

省略index：v-for = "item in 数组"

javascript 复制代码

<body>
  <div id="app">
    <h3>水果列表</h3>
    <ul>
      <li v-for="item in list">{{item}}</li>
    </ul>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app', 
      data: {
        list:['苹果','香蕉','橙子','葡萄']
      }
    })
  </script>
</body>

案例：渲染图书列表，并实现点击某个图书进行删除操作

javascript 复制代码

<body>
  <div id="app">
    <h3>图书列表</h3>
    <ul>
      <li v-for="item in booksList" :key="item.id">
        <div class="item">
          {{item.id}}.{{item.name}} {{item.price}}<button @click="del(item.id)">删除</button>
        </div>
      </li>
    </ul>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app', 
      data: {
        booksList:[
          { id:1,name:'《vue从入门到精通》',price:100},
          { id:2,name:'《vue.js 2.0 入门》',price:120},
          { id:3,name:'《vue.js 3.0 入门》',price:140},
          { id:4,name:'《python入门到精通》',price:160},
        ]
      },
      methods: {
        del(id){
          // filter:根据条件，保留满足条件的对应项，得到一个新数组,但是不会改变原数组
          this.booksList = this.booksList.filter(item => item.id !== id)
        }
      }
    })
  </script>
</body>

v-if中的key:

语法：key属性 = "唯一标识"

作用：给列表项添加的唯一标识 ，便于Vue进行列表项的正确排序复用

v-for的默认行为会尝试原地修改元素(就地复用)

1.key的值只能是字符串或数字类型

2.key的值必须具有唯一性

3.推荐使用id作为key(唯一)，不推荐使用index作为key(会变化，不对应)

三.v-model

作用：给表单元素使用，双向数据绑定，可以快速获取或设置表单元素内容

数据变化-------视图自动更新

视图变化-------数据自动更新

语法：v-model = '变量'

javascript 复制代码

<body>
  <div id="app">
    账户：<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>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app', 
      data: {
        username:'',
        password:''
      },
      methods:{
        login(){
          console.log(this.username,this.password)
        },
        reset(){
          this.username = ''
          this.password = ''
        }
      }
    })
  </script>
</body>

点击登录控制台打印

点击重置，清空输入框

案例：记事本（实现对事件的添加渲染删除清空操作）

javascript 复制代码

<style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      background-color: #f5f5f5;
      font-family: "Microsoft YaHei", sans-serif;
    }
    #app {
      width: 480px;
      margin: 60px auto;
      background-color: #fff;
      border-radius: 8px;
      box-shadow: 0 2px 12px rgba(0, 0, 0, .1);
      overflow: hidden;
    }
    .header {
      padding: 20px;
      text-align: center;
      font-size: 24px;
      font-weight: bold;
      color: #333;
      border-bottom: 1px solid #eee;
    }
    .input-area {
      display: flex;
      padding: 16px 20px;
      gap: 10px;
    }
    .input-area input {
      flex: 1;
      height: 40px;
      padding: 0 12px;
      border: 1px solid #ddd;
      border-radius: 4px;
      outline: none;
      font-size: 14px;
    }
    .input-area input:focus {
      border-color: #409eff;
    }
    .input-area .add-btn {
      width: 80px;
      height: 40px;
      border: none;
      border-radius: 4px;
      background-color: #409eff;
      color: #fff;
      font-size: 14px;
      cursor: pointer;
    }
    .input-area .add-btn:hover {
      background-color: #66b1ff;
    }
    .list {
      list-style: none;
      padding: 0 20px;
    }
    .list li {
      display: flex;
      align-items: center;
      height: 48px;
      border-bottom: 1px solid #f0f0f0;
    }
    .list li .index {
      width: 32px;
      color: #999;
      font-size: 14px;
    }
    .list li .text {
      flex: 1;
      font-size: 15px;
      color: #333;
    }
    .list li .del-btn {
      border: none;
      background: none;
      color: #ccc;
      font-size: 24px;
      cursor: pointer;
      padding: 4px 8px;
    }
    .list li .del-btn:hover {
      color: #f56c6c;
    }
    .footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px 20px;
      color: #999;
      font-size: 14px;
    }
    .footer .clear-btn {
      border: none;
      background: none;
      color: #409eff;
      font-size: 14px;
      cursor: pointer;
    }
    .footer .clear-btn:hover {
      text-decoration: underline;
    }
</style>
<body>
  <div id="app">
    <div class="header">记事本</div>
    <div class="input-area">
      <input type="text" placeholder="请输入要记录的内容" v-model="input">
      <button class="add-btn" @click="add">添加</button>
    </div>
    <ul class="list">
      <li v-for="item in list" :key="item.id">
        <span class="index">{{ item.id }}</span>
        <span class="text">{{ item.text }}</span>
        <button class="del-btn" @click="del(item.id)">×</button>
      </li>
    </ul>
    <div class="footer" v-show="list.length > 0">
      <span>合计 {{ list.length }} 条</span>
      <button class="clear-btn" @click="clear">清空</button>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app', 
      data: {
        list:[
          { id: 1, text: '学习 Vue 基础语法' },
          { id: 2, text: '完成记事本案例' },
          { id: 3, text: '晚上八点去跑步' }
        ],
        input: ''
      },
      methods: {
        add() {
          if (this.input.trim() === '')return // 输入为空时，不添加
          this.list.push({ id: this.list.length + 1, text: this.input }) // 添加到列表
          this.input = '' // 点击添加后，清空输入框
        },
        del(id) {
          this.list = this.list.filter(item => item.id !== id)
        },
        clear() {
          this.list = []
        }
      }
    })
  </script>
</body>

v-model应用于其他表单元素

常见的表单元素都可以用v-model绑定关联---------快速获取或设置表单元素的值

它会根据控件类型自动选取正确的方法来更新元素

输入框 input:text------value

文本域 textarea------value

复选框 input:checkbox------checked

单选框 input:radio------checked

下拉菜单 select------value

注意：

1.name：给单选框加上name属性，可以分组同一组互相会互斥

2.value：给单选框加上value属性，用于提交给后台的数据

3.option：需要设置value值，提交给后台

4.select的value值，关联了选中的option的value值

案例：个人简介表单数据

javascript 复制代码

<body>
  <div id="app">
    <h3>个人简介</h3>
    姓名：
    <input type="text" v-model="username">
    <br><br>
    是否单身：
    <input type="checkbox" v-model="isSingle">
    <br><br>
    性别：
    <input type="radio" v-model="gender" name="gender" value="0">男
    <input type="radio" v-model="gender" name="gender" value="1">女
    <br><br>
    所在城市：
    <select v-model="city">
      <option value="0">济南</option>
      <option value="1">北京</option>
      <option value="2">上海</option>
      <option value="3">广州</option>
    </select>
    <br><br>
    自我描述：<br>
    <textarea v-model="description" rows="4" cols="30"></textarea>
    <br>
    <button @click="submit">提交</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app', 
      data: {
        username: '',
        isSingle: false,
        gender: '0',
        city: '0',
        description: '',
      },
      methods:{
        submit(){
          console.log(this.username, this.isSingle, this.gender, this.city, this.description);
        }
      }
    })
  </script>
</body>

四.指令修饰符

通过 "." 指明一些指令后缀，不同后缀封装了不同的处理操作，简化代码

按键修饰符

@keyup.enter：键盘回车监听

v-model修饰符

v-model.trim：去除首尾空格

v-model.number：转数字

事件修饰符

@事件名.stop：阻止冒泡

@事件名.prevent：阻止默认行为

javascript 复制代码

<body>
  <div id="app">
    <input type="text" v-model="username" @keyup="add">
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app', 
      data: {
        username: ''
      },
      methods: {
        add(){
          console.log(this.username);
        }
      }
    })
  </script>
</body>

javascript 复制代码

<body>
  <div id="app">
    <input type="text" v-model="username" @keyup.enter="add">
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app', 
      data: {
        username: ''
      },
      methods: {
        add(){
          console.log(this.username);
        }
      }
    })
  </script>
</body>

五.v-bind操作class和style

语法：:class = "对象/数组"

1.对象：键就是类名，值是布尔值。如果值为true，有这个类，否则没有这个类

适用场景：一个类名，来回切换

2.数组：数组中所有的类，都会添加到盒子上，本质就是一个class列表

适用场景：批量添加或删除类

javascript 复制代码

<style>
    .box{
      width: 200px;
      height: 200px;
      border: 2px solid;
      font-size: 24px;
    }
    .red{
      background-color: red;
    }
    .big{
      border-radius: 20px;
    }
</style>
<body>
  <div id="app">
    <div class="box" :class="{ red:true, big:true }">落霞与孤鹜齐飞</div>
    <div class="box" :class="['red', 'big']">秋水共长天一色</div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app', 
      data: {
        
      }
    })
  </script>
</body>

案例：京东秒杀tab导航高亮

javascript 复制代码

<style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    .tab {
      display: flex;
      width: 560px;
      margin: 60px auto;
      border-bottom: 2px solid #e1251b;
      list-style: none;
    }
    .tab li {
      margin-right: 10px;
    }
    .tab li a {
      display: block;
      padding: 12px 28px;
      border: 1px solid #e0e0e0;
      background-color: #fff;
      color: #333;
      font-size: 16px;
      font-weight: bold;
      text-decoration: none;
    }
    .tab li a.active {
      border-color: #e1251b;
      background-color: #e1251b;
      color: #fff;
    }
</style>
<body>
  <div id="app">
    <ul class="tab">
      <li v-for="(item,index) in list" :key="item.id" @click="activeId = index">
        <a href="#" :class="{'active':index === activeId}">{{item.name}}</a>
      </li>
    </ul>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app', 
      data: {
        list:[
          { id:1, name:'京东秒杀'},
          { id:2, name:'每日特价'},
          { id:3, name:'品类秒杀'}
        ],
        activeId:0 // 高亮状态
      }
    })
  </script>
</body>

语法：:style = "样式对象"

适用场景：某个具体属性的动态设置

javascript 复制代码

<style>
    .box{
      width: 200px;
      height: 200px;
      background-color: aquamarine;
    }
</style>
<body>
  <div id="app">
    <div class="box" :style="{'width':'250px','height':'250px','backgroundColor':'red'}"></div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app', 
      data: {
        
      }
    })
  </script>
</body>

案例：点击不同按钮实现进度条显示

javascript 复制代码

<style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    #app {
      width: 500px;
      margin: 80px auto;
      text-align: center;
    }

    .progress {
      position: relative;
      height: 30px;
      background-color: #333;
      border-radius: 15px;
      margin-bottom: 60px;
    }

    .progress .inner {
      width: 50%;
      height: 100%;
      background-color: #4a9eff;
      border-radius: 15px;
      transition: width 0.3s ease-in-out;
    }

    .progress .inner span {
      position: absolute;
      left: 0;
      top: 36px;
      width: 100%;
      text-align: center;
      font-size: 20px;
      color: #000;
    }

    button {
      margin: 0 6px;
      padding: 6px 12px;
      border: 1px solid #ccc;
      border-radius: 4px;
      background-color: #f5f5f5;
      font-size: 14px;
      cursor: pointer;
    }
</style>
<body>
  <div id="app">
    <div class="progress">
      <div class="inner" :style="{ width: progress + '%' }">
        <span>{{ progress }}%</span>
      </div>
    </div>
    <button @click="progress = 25">设置25%</button>
    <button @click="progress = 50">设置50%</button>
    <button @click="progress = 75">设置75%</button>
    <button @click="progress = 100">设置100%</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app', 
      data: {
        progress: 25
      }
    })
  </script>
</body>