Vue2插值操作

最新推荐文章于 2024-07-09 14:14:15 发布

莫比乌斯的日落

最新推荐文章于 2024-07-09 14:14:15 发布

阅读量140

点赞数 1

文章标签： vue

本文链接：https://blog.csdn.net/aliyun3/article/details/124073399

版权

本文介绍了Vue2中的六种插值和指令：Mustache语法用于展示数据；v-once指令确保元素只渲染一次；v-html用于插入HTML内容；v-text用于覆盖元素的文本内容；v-pre避免Mustache语法的解析；v-cloak则解决数据加载时的闪烁问题，提供更好的用户体验。

摘要由CSDN通过智能技术生成

1. Mustache语法

mustache是胡须的意思，因为{ {}}像胡须，又叫大括号语法。

在vue对象挂载的dom元素中，{ {}}不仅可以直接写变量，还可以写简单表达式。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Mustache的语法</title>
</head>
<body>
  <div id="app">
    <h2>{
  {message}}</h2>
    <h2>{
  {message}},啧啧啧</h2>

    <!-- Mustache的语法不仅可以直接写变量，还可以写简单表达式 -->
    <h2>{
  {firstName + lastName}}</h2>
    <h2>{
  {firstName + " " + lastName}}</h2>
    <h2>{
  {firstName}}{
  {lastName}}</h2>
    <h2>{
  {count * 2}}</h2>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el:"#app",
      data:{
        message:"你好啊",
        firstName:"skt t1",
        lastName:"faker",
        count:100
      }
    })

  </script>
</body>
</html>

2. v-once

最低0.47元/天解锁文章

莫比乌斯的日落

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue2插值操作

1. Mustache语法mustache是胡须的意思，因为{{}}像胡须，又叫大括号语法。在vue对象挂载的dom元素中，{{}}不仅可以直接写变量，还可以写简单表达式。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"
复制链接

扫一扫