指令补充+computed计算属性

原创已于 2024-08-29 21:55:39 修改 · 350 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #java

于 2024-07-16 16:36:14 首次发布

文章目录

指令补充
computed 计算属性
- 基础语法

指令补充

指令修饰符

通过 “.” 指明一些指令后缀，不同后缀封装了不同的处理操作 → 简化代码
① 按键修饰符：@keyup.enter → 键盘回车监听

当按下enter，控制台输出”键盘回车触发“加上输入的内容

② v-model修饰符
v-model.trim → 去除首尾空格
v-model.number → 转数字

即使我们在小明前面输入了空格，username中也不会有（之去掉首位，中间的不会去掉）

③ 事件修饰符
@事件名.stop → 阻止冒泡
@事件名.prevent → 阻止默认行为

在添加 .stop 之前，点击”儿子“区域也会弹出老父亲被点击了，添加后则不会弹出
添加 .prevent 之前，点击 a 标签，则会默认跳到标签所对应的连接，添加后则阻止了这一默认行为

v-bind对样式操作的增强

v-bind控制class：对象-> :class = “{类名1：布尔值，类名2：布尔值…}”，布尔值为true则有效，否则无效，用于频繁切换场景
数组-> :class = “[‘类名1’,‘类名2’…]”，一直有效，用于添加或删除类

pink 为 false 则pink无效

v-bind控制style: style=“{CSS属性名1：CSS属性值,CSS属性名1：CSS属性值…}”

没加 :style对盒子进行修改前
没加之前
加了之后

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

代码展示

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    textarea {
      display: block;
      width: 240px;
      height: 100px;
      margin: 10px 0;
    }
  </style>
</head>

<body>

  <div id="app">
    <h3>小黑学习网</h3>

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

    是否单身：
    <input type="checkbox" v-model="isSingle">
    <br><br>

    <!-- 
      前置理解：
        1. name:  给单选框加上 name 属性 可以分组 → 同一组互相会互斥
        2. value: 给单选框加上 value 属性，用于提交给后台的数据
      结合 Vue 使用 → v-model
    -->
    性别:
    <input v-model="gender" type="radio" name="gender" value="1">男
    <input v-model="gender" type="radio" name="gender" value="2">女
    <br><br>

    <!-- 
      前置理解：
        1. option 需要设置 value 值，提交给后台
        2. select 的 value 值，关联了选中的 option 的 value 值
      结合 Vue 使用 → v-model
    -->
    所在城市:
    <select v-model="cityId">
      <option value="1">北京</option>
      <option value="2">上海</option>
      <option value="3">成都</option>
      <option value="4">南京</option>
    </select>
    <br><br>

    自我描述：
    <textarea v-model="desc"></textarea>

    <button>立即注册</button>
  </div>
  <script src="./vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        username: '',
        isSingle: false,
        gender: "1",
        cityId: '1',
        desc: ""
      }
    })
  </script>
</body>

</html>

结果展示

computed 计算属性

基础语法

**概念：**基于现有的数据，计算出来的新属性。依赖的数据变化，自动重新计算。
**语法： **
① 声明在 computed 配置项中，一个计算属性对应一个函数
② 使用起来和普通属性一样使用 {{ 计算属性名 }}
computed: {
计算属性名 () {
基于现有数据，编写求值逻辑
return 结果
}
},
计算属性 → 可以将一段求值的代码进行封装
代码展示：

结果展示：