Vue 常见的指令

一条代码虫

已于 2022-06-15 08:34:41 修改

阅读量62

点赞数

文章标签：蓝桥杯 elementui 拓扑学

于 2022-06-15 08:27:40 首次发布

本文链接：https://blog.csdn.net/Alittle_lazy/article/details/125289804

版权

<!DOCTYPE html>
<html lang="zh">
<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">
    <p>
      v-text指令：<span v-text="message"></span> //文本渲染指令
    </p>
    <p>
      v-html指令：<span v-html="message"></span> //超文本渲染指令
    </p>
    <p>
      <!-- 输出渲染：<span v-html="article"></span> -->
    </p>
    <p>
      v-once指令：<span v-html="message" v-once></span> //单次加载指令
    </p>
    <p>
      v-show网站欢迎语：<span v-show="isLogin">尊敬的用户您好，欢迎访问本系统</span> //条件渲染指令
    </p>
        <p>
          v-if网站欢迎语：<span v-if="isLogin">尊敬的用户您好，欢迎访问本系统</span> //条件渲染指令
                        <span v-else>登录 | 注册</span>
          <br />
          年龄： <span v-if="age <= 20">弱冠之年</span>
                <span v-else-if="age > 20 && age <= 30">而立之年</span>
                <span v-else-if="age > 30 && age <= 40">不惑</span>
                <span v-else-if="age > 40 && age <= 50">知命</span>
                <span v-else>百度一下...</span>
        </p>
  </div>
    
  <script src="./vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        message: "指令语法中，当成标签的属性存在的；<strong>值是对应的表达式</strong>",
        article: "文章中自己写了一段代码<iframe src='https://www.sina.com' style='width:1200px;height:500px;'></iframe>",
        isLogin: false,
        age : 20
      }
    })
  </script>
</body>
</html>