Vue2教程002：Vue指令

news2024/11/18 5:35:14

文章目录

2、Vue指令
- 2.1 开发者工具
- 2.2 v-html
- 2.3 v-show和v-if
- 2.4 v-else和v-else-if
- 2.5 v-on
- - 2.5.1 内联语句
  - 2.5.2 methods

2、Vue指令

2.1 开发者工具

通过谷歌应用商店安装（需要科学上网）
通过极简插件安装

2.2 v-html

Vue会根据不同的指令，针对标签实现不同的功能。

指令：带有v-前缀的特殊标签属性。

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <div v-html="msg"></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: {
            msg: `
        <a href="http://www.baidu.com">百度</a>
      `
        }
    })
</script>
</body>
</html>

2.3 v-show和v-if

v-show：

作用：控制元素显示隐藏。
语法：v-show="表达式" 表达式的值true显示，false隐藏。
原理：切换display:none控制显示隐藏。
场景：频繁切换显示隐藏的场景。

v-if：

作用：控制元素显示隐藏（条件渲染）。
语法：v-if="表达式" 表达式的值true显示，false隐藏。
根据判断条件控制元素的创建和移除（条件渲染）。
要么显示，要么隐藏，不频繁切换的场景。

打开调试，查看二者的区别：

在这里插入图片描述

v-show底层原理：切换css的display:none来控制显示和隐藏。

v-if底层原理：根据判断条件控制元素的创建和移除（条件渲染）。

2.4 v-else和v-else-if

作用：辅助v-if进行判断渲染。
语法：v-else v-else-if="表达式"
需紧挨着v-if使用

代码实例：

<div id="app">
    <p v-if="gender===1">性别：男</p>
    <p v-else>性别：女</p>
    <hr>
    <p v-if="score >= 90">成绩评定A：奖励电脑一台</p>
    <p v-else-if="score >= 80">成绩评定B：奖励周末旅游</p>
    <p v-else-if="score >= 70">成绩评定C：奖励零食礼包</p>
    <p v-else>成绩评定D：惩罚一周不吃饭</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            gender: 1,
            score: 90,
        }
    })
</script>

注意：

v-else不能单独使用。

2.5 v-on

作用：注册事件 = 添加监听 + 提供处理逻辑
语法：
1. v-on：事件名=“内联语句”
2. v-on：事件名=“methods中的函数名”

2.5.1 内联语句

代码示例：

<body>
<div id="app">
    <button v-on:click="count--">-</button>
    <span>{{count}}</span>
    <button v-on:click="count++">+</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: {
            count: 35,
        }
    })
</script>
</body>

注意：

v-on:可以替换为@，即v-on:click=>@click

2.5.2 methods

代码示例：

<body>
<div id="app">
    <button v-on:click="controllShow">切换显示隐藏</button>
    <h1 v-show="isShow">Hello, 不写八个</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            isShow: false,
        },
        methods:{
            controllShow(){
                this.isShow = !this.isShow;
            }
        }
    })
</script>
</body>