02-插值的操作

最新推荐文章于 2024-09-26 14:13:26 发布

多次拒绝易烊千玺/dog.jpg

最新推荐文章于 2024-09-26 14:13:26 发布

阅读量81

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/weixin_53174744/article/details/118354382

版权

Vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、Mustache语法.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<!-- Mustache语法也就是双大括号 -->
<div id="app">
  <h2>{{message}}</h2>
  <h2>{{message}}, 李银河！</h2>
  <!-- mustache语法中，不仅仅可以直接写变量，也可以写简单的表达式 -->
  <h2>{{firstName + lastName}}</h2>
  <h2>{{firstName + ' ' + lastName}}</h2>
  <h2>{{firstName}} {{lastName}}</h2>
  <h2>{{counter * 2}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app', //用于挂载要管理的元素
    data: { //定义数据
      message: '你好啊',
      firstName: 'kobe',
      lastName: 'bryant',
      counter: 100
    },
    methods: {

    }
  })
</script>
</body>
</html>

在这里插入图片描述

二、v-once指令的使用.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  <h2>{{message}}</h2>
  <h2 v-once>{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app', //用于挂载要管理的元素
    data: { //定义数据
      message: '你好啊'
    },
    methods: {

    }
  })
</script>
</body>
</html>

v-once指令只渲染元素和组件一次，随后的重新渲染，元素/组件及其所有的子节点将视为静态内容并跳过，这可以用于优化更新性能。

在这里插入图片描述

三、v-html指令的使用.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  <h2>url</h2>
  <h2 v-html="url"></h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app', //用于挂载要管理的元素
    data: { //定义数据
      url: '<a href="http://www.baidu.com">百度一下</a>'
    },
    methods: {

    }
  })
</script>
</body>
</html>

在这里插入图片描述

四、v-text指令的使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  <h2>{{message}}，李银河！</h2>
  <h2 v-text="message"></h2>
  <h2 v-text="message">，李银河！</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app', //用于挂载要管理的元素
    data: { //定义数据
      message: "你好啊"
    },
    methods: {

    }
  })
</script>
</body>
</html>

在这里插入图片描述
v-text用的比较少，因为它不够灵活，元素中的文字会被v-text中的内容覆盖。

五、v-pre指令的使用

这个指令用得很少。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  <h2>{{message}}</h2>
  <h2 v-pre>{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app', //用于挂载要管理的元素
    data: { //定义数据
      message: '你好啊'
    },
    methods: {

    }
  })
</script>
</body>
</html>

在这里插入图片描述

六、v-cloak指令的使用.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    [v-cloak] {
      display: none;
    }
  </style>
</head>
<body>

<div id="app" v-cloak>
  {{message}}
</div>

<script src="../js/vue.js"></script>
<script>
  //在vue解析之前，div中有属性v-cloak
  //在vue解析之后，div中没有v-cloak属性
  setTimeout(function () {
    const app = new Vue({
      el: '#app', //用于挂载要管理的元素
      data: { //定义数据
        message: '你好啊'
      },
      methods: {

      }
    })
  }, 1000)
</script>
</body>
</html>