Vue常用指令1(内容渲染指令/条件渲染指令）

ayo只若初见

已于 2024-04-21 16:21:57 修改

阅读量762

点赞数 10

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

于 2024-04-21 16:16:07 首次发布

本文链接：https://blog.youkuaiyun.com/cyqwersj/article/details/138035531

1.内容渲染指令(v-html,v-text)

(1)v-text

使用语法：`<p v-text="uname">hello</p>`，意思是将 uame 值渲染到 p 标签中

(2)v-html

使用语法：`<p v-html="intro">hello</p>`，意思是将 intro 值渲染到 p 标签中

二者区别：v-text只会识别文本，v-html会识别标签

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p v-text="uname">hello</p>
        <p v-html="intro">hello</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:{
                uname:'<h1>这里是v-text</h1>',
                intro:'<h1>这里是v-html</h1>'
            }
        })
    </script>
</body>
</html>

运行结果

2.条件渲染指令(v-show,v-if,v-else,v-else-if)

(1)v-show

语法： v-show = "表达式" 表达式值为 true 显示， false 隐藏

场景：频繁切换显示隐藏的场景

(2)v-if

语法： v-if= "表达式" 表达式值 true显示， false 隐藏

场景：要么显示，要么隐藏，不频繁切换的场景

v-show和v-if区别:适用场景不同，v-show显示和隐藏节点,而v-if为创建和删除元素节点

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
          width: 200px;
          height: 100px;
          line-height: 100px;
          margin: 10px;
          border: 3px solid #000;
          text-align: center;
          border-radius: 5px;
          box-shadow: 2px 2px 2px #ccc;
        }
      </style>
</head>
<body>
    <div id="app">
        <div v-show='flag' class="box">我是v-show控制的盒子</div>
        <div v-if='flag'   class="box">我是v-if控制的盒子</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:{
                flag:true
            }
        })
    </script>
</body>
</html>

运行结果如下图所示

把代码修改

flag:false

运行结果

（图片可能不清晰，以下为放大图）

可以看出显示都为空白，但是经过调试发现v-show的盒子还存在，但是v-if节点已经被删除

(3)v-else和v-else-if

它们都是辅助v-if进行判断渲染,需要接着v-if进行使用

v-else-if后面接表达式，满足表达式则执行

v-else只要v-if和v-else-if都不满足则会执行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <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>=70">成绩判定B:奖励出去旅行一场</p>
        <p v-else-if="score>=65">成绩判定C:奖励一包干脆面</p>
        <p v-else>成绩判定D:安排去学习</p>
        <hr>
        <p v-if="score==100">暑假作业全免</p>
        <p v-else-if="score>=80">免去语数英</p>
        <p v-else-if="score>=60">免去小科作业</p>
        <p v-else>不免</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:2,
                score:60
            }
        })
    </script>
</body>
</html>

运行结果