Vue学习总结（五）——插值操作

最新推荐文章于 2024-02-09 14:28:27 发布

田小江爱分享

最新推荐文章于 2024-02-09 14:28:27 发布

阅读量131

点赞数

分类专栏： Vue学习笔记

本文链接：https://blog.csdn.net/third_/article/details/111083769

版权

本文详细介绍了Vue中的六种插值操作，包括Mustache语法、v-once指令用于一次性渲染、v-html指令用于解析HTML内容、v-text指令用于显示文本、v-pre指令跳过编译过程以及v-cloak指令防止未编译模板的闪烁。

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

1、Mustache语法（也就是双大括号，Mustache：胡子、胡须）

（1）可以直接插入到标签中

（2）可以写简单的表达式

（3）可以两个mustache一起使

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <div id="app">
    <!--插入到标签中-->
    <h2>{
  {message}}</h2>
    <h2>{
  {message}}, 李银河</h2>
    <!--mustache语法中，不仅仅可以直接写变量，也可以写简单的表达式-->
    <h2>{
  {firstName + lastName}}</h2>
    <h2>{
  {firstName + ' ' + lastName}}</h2>
    <h2>{
  {counter * 5}}</h2>
    <!--使用了两个mustache-->
    <h2>{
  {firstName}} {
  {lastName}}</h2>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: '你好啊',
        firstName: 'kim',
        lastName: 'tian',
        counter: 100
      }
    })
  </script>
</body>
</html>