vue修饰符

最新推荐文章于 2024-10-05 01:22:45 发布

等一场梦

最新推荐文章于 2024-10-05 01:22:45 发布

阅读量314

点赞数 5

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_74599628/article/details/138067822

版权

本文详细介绍了Vue中的指令修饰符、v-bind的样式增强操作、v-model在表单元素中的应用，以及computed计算属性和watch侦听器的使用。并通过实例展示了如何实现动态渲染、事件处理和京东秒杀tab栏的高亮切换。

摘要由CSDN通过智能技术生成

1.指令补充

1. 指令修饰符

2. v-bind对样式增强的操作

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

### 2.computed计算属性

1. 基础语法

2. 计算属性vs方法

3. 计算属性的完整写法

4. 成绩案例

### 3.watch侦听器

1. 基础写法

2. 完整写法

### 4.综合案例（演示）

1. 渲染 / 删除 / 修改数量 / 全选 / 反选 / 统计总价 / 持久化

## 二、指令修饰符

### 1.什么是指令修饰符？

所谓指令修饰符就是通过“.”指明一些指令**后缀** 不同的**后缀**封装了不同的处理操作 —> 简化代码

### 2.按键修饰符

- @keyup.enter —>当点击enter键的时候才触发

代码演示：

<div id="app">

    <h3>@keyup.enter  →  监听键盘回车事件</h3>

    <input v-model="username" type="text">

  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

  <script>

    const app = new Vue({

      el: '#app',

      data: {

        username: ''

      },

      methods: {

       

      }

    })

  </script>

### 3.v-model修饰符

- v-model.trim —>去除首位空格

- v-model.number —>转数字

### 4.事件修饰符

- @事件名.stop —> 阻止冒泡

- @事件名.prevent —>阻止默认行为

- @事件名.stop.prevent —>可以连用即阻止事件冒泡也阻止默认行为

 <style>

    .father {

      width: 200px;

      height: 200px;

      background-color: pink;

      margin-top: 20px;

    }

    .son {

      width: 100px;

      height: 100px;

      background-color: skyblue;

    }

  </style>

 <div id="app">

    <h3>v-model修饰符 .trim .number</h3>

    姓名：<input v-model="username" type="text"><br>

    年纪：<input v-model="age" type="text"><br>



   

    <h3>@事件名.stop     →  阻止冒泡</h3>

    <div @click="fatherFn" class="father">

      <div @click="sonFn" class="son">儿子</div>

    </div>



    <h3>@事件名.prevent  →  阻止默认行为</h3>

    <a @click href="http://www.baidu.com">阻止默认行为</a>

  </div>

 <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

  <script>

    const app = new Vue({

      el: '#app',

      data: {

        username: '',

        age: '',

      },

      methods: {

        fatherFn () {

          alert('老父亲被点击了')

        },

        sonFn (e) {

          // e.stopPropagation()

          alert('儿子被点击了')

        }

      }

    })

  </script>

```

## 三、v-bind对样式控制的增强-操作class

为了方便开发者进行样式控制， Vue 扩展了 v-bind 的语法，可以针对 **class 类名** 和 **style 行内样式** 进行控制。

### 1.语法：

```html

<div> :class = "对象/数组">这是一个div</div>

```

### 2.对象语法

当class动态绑定的是**对象**时，**键就是类名，值就是布尔值**，如果值是**true**，就有这个类，否则没有这个类

```html

```

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

### 3.数组语法

当class动态绑定的是**数组**时 → 数组中所有的类，都会添加到盒子上，本质就是一个 class 列表

```html

```

使用场景:批量添加或删除类

### 4.代码练习

```html

 <style>

    .box {

      width: 200px;

      height: 200px;

      border: 3px solid #000;

      font-size: 30px;

      margin-top: 10px;

    }

    .pink {

      background-color: pink;

    }

    .big {

      width: 300px;

      height: 300px;

    }

  </style>

<div id="app">

    <!--绑定对象-->

    <div class="box">黑马程序员</div>

    <!--绑定数组-->

    <div class="box">黑马程序员</div>

  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

  <script>

    const app = new Vue({

      el: '#app',

      data: {



      }

    })

  </script>

```

## 四、京东秒杀-tab栏切换导航高亮

### 1.需求：

当我们点击哪个tab页签时，哪个tab页签就高亮

### 2.准备代码:

```html

 <style>

    * {

      margin: 0;

      padding: 0;

    }

    ul {

      display: flex;

      border-bottom: 2px solid #e01222;

      padding: 0 10px;

    }

    li {

      width: 100px;

      height: 50px;

      line-height: 50px;

      list-style: none;

      text-align: center;

    }

    li a {

      display: block;

      text-decoration: none;

      font-weight: bold;

      color: #333333;

    }

    li a.active {

      background-color: #e01222;

      color: #fff;

    }



  </style>

<div id="app">

    <ul>

      <li><a class="active" href="#">京东秒杀</a></li>

      <li><a href="#">每日特价</a></li>

      <li><a href="#">品类秒杀</a></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: [

          { id: 1, name: '京东秒杀' },

          { id: 2, name: '每日特价' },

          { id: 3, name: '品类秒杀' }

        ]

      }

    })

  </script>

```

### 3.思路：

1.基于数据，动态渲染tab（v-for）

2.准备一个下标记录高亮的是哪一个 tab

3.基于下标动态切换class的类名

### 1.指令补充

1. 指令修饰符

2. v-bind对样式增强的操作

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

### 2.computed计算属性

1. 基础语法

2. 计算属性vs方法