Vue3学习笔记（4.0）

最新推荐文章于 2024-07-10 22:11:08 发布

mez_Blog

最新推荐文章于 2024-07-10 22:11:08 发布

阅读量165

点赞数 1

分类专栏：前端 Vue3 HTML5 文章标签：学习前端 javascript vue.js 开发语言

本文链接：https://blog.csdn.net/mez_Blog/article/details/129794791

版权

前端同时被 3 个专栏收录

49 篇文章 0 订阅

订阅专栏

HTML5

32 篇文章 0 订阅

订阅专栏

23 篇文章 0 订阅

订阅专栏

vue.js为两个最为常用的指令提供了特别的缩写：

//全称
<a v-bind:href="url"></a>

//缩写
<a :href="url"></a>

v-on缩写

//全称
<a v-on:click="doSomething"></a>

//缩写
<a @click="doSonthing"></a>

条件判断

条件判断使用v-if指令，指令的表达式返回true时才会显示.

由于v-if是一个指令，所以必须将它添加到一个元素上。如果是多个元素，可以包裹在<template>元素上，并在上面使用v-if。最终的渲染结果将不包含<template>元素。

<!--
 * @Author: RealRoad1083425287@qq.com
 * @Date: 2023-03-27 14:37:59
 * @LastEditors: Mei
 * @LastEditTime: 2023-03-27 14:41:29
 * @FilePath: \vscode\v-if.html
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<!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>
    <script src="vue_doc/vue.global3.js"></script>
</head>
<body>
    <div id="mez">
        <template v-if="seen">
            <h1>这是一个段落标题</h1>
            <p>正文1</p>
            <p>正文2</p>
            <p>正文3</p>
        </template>
    </div>

    <script>
        const change={
            data(){
                return{
                    seen:true
                }
            }
        }

        Vue.createApp(change).mount('#mez')
    </script>
</body>
</html>

v-else

可以用v-else指令给v-if添加一个"else"块:

我们还使用这个例子来玩一玩

<!--
 * @Author: RealRoad1083425287@qq.com
 * @Date: 2023-03-27 14:37:59
 * @LastEditors: Mei
 * @LastEditTime: 2023-03-27 14:46:02
 * @FilePath: \vscode\v-if.html
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<!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>
    <script src="vue_doc/vue.global3.js"></script>
</head>
<body>
    <div id="mez">
        <template v-if="seen">
            <h1>这是一个段落标题</h1>
            <p>正文1</p>
            <p>正文2</p>
            <p>正文3</p>
        </template>
        <template v-else>
            <h1>this is a title</h1>
            <p>contex1</p>
            <p>context2</p>
            <p>context3</p>
        </template>
    </div>

    <script>
        const change={
            data(){
                return{
                    seen:false
                }
            }
        }

        Vue.createApp(change).mount('#mez')
    </script>
</body>
</html>

在seen处等于false，所以就显示了下面一个template的内容

编程这玩意就是要试着举一反三，同样的例子，我们再来看v-else-if,感觉和js或大部分的编程语言类似，只是前面多了v-而已。

<!--
 * @Author: RealRoad1083425287@qq.com
 * @Date: 2023-03-27 14:37:59
 * @LastEditors: Mei
 * @LastEditTime: 2023-03-27 14:52:01
 * @FilePath: \vscode\v-if.html
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<!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>
    <script src="vue_doc/vue.global3.js"></script>
</head>
<body>
    <div id="mez">
        <template v-if="seen">
            <h1>这是一个段落标题</h1>
            <p>正文1</p>
            <p>正文2</p>
            <p>正文3</p>
        </template>
        <template v-else-if="seen2">
            <h1>this is a title</h1>
            <p>contex1</p>
            <p>context2</p>
            <p>context3</p>
        </template>
        <template v-else-if="seen3">
            <h1>1111</h1>
            <p>c2222</p>
            <p>3333</p>
            <p>4444</p>
        </template>
        <template v-else>
            <h1>赵云</h1>
            <p>子龙</p>
            <p>翼德</p>
            <p>孟德</p>
        </template>
    </div>

    <script>
        const change={
            data(){
                return{
                    seen:false
                }
            }
        }

        Vue.createApp(change).mount('#mez')
    </script>
</body>
</html>

例子都不再换的，中间又添加了v-else-if项而已，这里只是seen不满足的情况，也就是不会有seen2,seen3.那我们来把对应的seen2或seen3设置为TRUE，那么其他的都是false喽。

OK，完美！和我想象的一样。注意：当我们使用v-else时，都是放在最后一项用的，不要弄错v-else和v-else-if的顺序。

控制显示或不显示还有一个就是v-show：

<div id="app">
    <h1 v-show="ok">Hello!</h1>
</div>
    
<script>
const app = {
  data() {
    return {
      ok: false
    }
  }
}
 
Vue.createApp(app).mount('#app')

mez_Blog

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue3学习笔记（4.0）

例子都不再换的，中间又添加了v-else-if项而已，这里只是seen不满足的情况，也就是不会有seen2,seen3.那我们来把对应的seen2或seen3设置为TRUE，那么其他的都是false喽。注意：当我们使用v-else时，都是放在最后一项用的，不要弄错v-else和v-else-if的顺序。编程这玩意就是要试着举一反三，同样的例子，我们再来看v-else-if,感觉和js或大部分的编程语言类似，只是前面多了v-而已。条件判断使用v-if指令，指令的表达式返回true时才会显示.
复制链接

扫一扫