vue指令（插值表达式、v-cloak、v-text、v-html）

最新推荐文章于 2024-08-09 18:01:20 发布

qy220824

最新推荐文章于 2024-08-09 18:01:20 发布

阅读量140

点赞数

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.csdn.net/qq_59185329/article/details/126941894

版权

vue 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

vue指令

1、插值表达式
2、v-cloak
3、v-text
4、v-html

1、插值表达式

插值表达式{{}}，用于获取变量值

<body>
  <!-- 视图层 -->
  <div id="app">
    {{msg}}
  </div>
</body>
<script>
  // 调度层
  let vm = new Vue({
    el:"#app",
    data:{
      msg:'变量值'
    },
    methods:{
      // 存放方法
    }
  })
</script>

在这里插入图片描述

2、v-cloak

v-cloak，防止界面闪烁，在请求到之前通过display:none隐藏元素，在请求到数据后在显示元素。在我们vue加载之前v-cloak是存在，vue加载结束之后v-cloak就隐藏了。

<style>
    /* 防止页面闪烁 在控制台network中设为slow3G进行验证*/
    [v-cloak]{
      display: none;
    }
  </style>

3、v-text

v-text：会替换掉元素里的内容

<body>
  <!-- 视图层 -->
  <div id="app">
    <p>{{msg}}</p>
    <p v-text="message">{{msg}}</p>
  </div>
</body>
<script>
  // 调度层
  let vm = new Vue({
    el:"#app",
    data:{
      msg:'p标签的内容',
      message:'替换后的'
    },
    methods:{
      // 存放方法
    }
  })
</script>

在这里插入图片描述

4、v-html

v-html：可以渲染html界面

<body>
  <!-- 视图层 -->
  <div id="app">
    <p>{{msg}}</p>
    <p v-html="message">{{msg}}</p>
  </div>
</body>
<script>
  // 调度层
  let vm = new Vue({
    el:"#app",
    data:{
      msg:'p标签的内容',
      message:'<h2>我是标题</h2>'
    },
    methods:{
      // 存放方法
    }
  })
</script>