Vue2常用指令

原创已于 2024-08-29 21:55:00 修改 · 1.5k 阅读

31 ·

CC 4.0 BY-SA版权

文章标签：

#数据库 #java #前端

于 2024-07-15 23:19:23 首次发布

文章目录

Vue标签简介
常用标签作用：

Vue标签简介

指令就是带有 v- 前缀的特殊属性，不同属性对应不同的功能
学习不同指令 → 解决不同业务场景需求
Vue2的指令有16个：v-text、v-html、v-show、v-if、v-else、v-else-if、v-for、v-on、v-bind、v-model、v-slot、v-pre、v-cloak、v-once
而我们主要使用的有：v-html、v-show、v-if、v-else、v-else-if、v-for、v-on、v-bind、v-model

常用标签作用：

v-html:

作用：设置元素的 innerHTML
语法：v-html = "表达式 "
例子：当div标签没有添加v-html指令，运行后页面没有任何内容

当我们加入v-html后：

会调用下面msg的内容，并在网页显示我们的标签

v-show 与 v-if

show 作用：控制元素显示隐藏
show语法： v-show = “表达式” 表达式值 true 显示， false 隐藏
if 作用：控制元素显示隐藏（条件渲染）
if 语法： v-if = “表达式” 表达式值 true 显示， false 隐藏
代码展示：

结果展示：

当v-show/v-if指令为true时，则盒子显示，当为false时，盒子隐藏
区别：show 指令与 if 指令的作用非常相似，当show的结果为false时，仅仅是切换了CSS的diplay：none，将盒子隐藏，而if为false时，则是直接将盒子删除。
因此，show主要用于频繁的切换显示隐藏的场景；if用于，要么显示，要么隐藏，不频繁切换的场景。

v-else v-else-if

作用：辅助 v-if 进行判断渲染
语法： v-else v-else-if = “表达式”
注意：需要紧挨着 v-if 一起使用，当没有v-if 时则会直接报错
代码展示：

效果展示：
代码中gender为1，score为80，因此从别为男，成绩判定为B

v-on

作用：注册事件 = 添加监听 + 提供处理逻辑
语法：
① v-on:事件名 = “内联语句”
② v-on:事件名 = “methods中的函数名”
①代码展示：

①结果展示：
每当点解 +/- v-on 便会处理 count++/count–

②代码展示

②结果展示：
每当点击切换按钮，便会调用fn()，将isShow改为true/false，从而将”我爱学习“隐藏或显示

类似的，fn()中也可以传递参数：

v-bind

作用：动态的设置html的标签属性 → src url title …
语法： v-bind:属性名=“表达式”
总所周知，我们的指令是无法直接写道我们的样式中的，但当我们添加v-bind后：

结果展示：
通过结果我们可以看到，v-bind：src的结果和：src一样。
因此，我们可以将 v-bind:属性名="表达式"简写为:属性名=“表达式”

v-for

作用：基于数据循环，多次渲染整个元素 → 数组、对象、数字…
遍历数组语法：
v-for = “(item, index) in 数组”
使用v-for 遍历集合 list: [‘西瓜’, ‘苹果’, ‘鸭梨’]

结果展示：
根据结果显示，当我们不需要index时，是可以省略的 v-for = “item in 数组”。
注意：一般我们的 v-for 后面都是要跟一个 :key

v-model

作用: 给表单元素使用, 双向数据绑定 → 可以快速获取或设置表单元素内容
① 数据变化 → 视图自动更新
② 视图变化 → 数据自动更新
语法: 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>
</head>

<body>

  <div id="app">
    <!-- 
    v-model 可以让数据和视图，形成双向数据绑定
    (1) 数据变化，视图自动变化
    (2) 视图变化了，数据自动更新
    可以快速的获取或者设置表单元素
    -->
    账户：<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="./vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        username: '',
        password: ''
      },
      methods: {
        login() {
          console.log(this.username, this.password);
        },
        reset() {
          console.log("已重置");
          this.username = '';
          this.password = '';
        }
      }
    })
  </script>
</body>

</html>