vue插值的操作

最新推荐文章于 2022-11-28 22:48:19 发布

不是死水

最新推荐文章于 2022-11-28 22:48:19 发布

阅读量130

点赞数

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

本文链接：https://blog.csdn.net/weixin_57976362/article/details/118228697

版权

本文介绍了Vue中的插值语法{{}}及其应用场景，包括简单表达式、空格连接以及并列显示。同时，文章详细讲解了v-once指令的作用，即只渲染元素和组件一次，后续数据变动不再更新。另外，提到了v-html用于解析包含HTML标签的数据，v-text指令用于替换元素的文本内容，以及v-pre指令用于跳过插值处理，保持原始HTML不变。

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

1.mustache语法 { {}} ：俗称双大括号语法

作用：把数据中的内容解析到视图层

引入vue文件

  <script src="../js/vue.js"></script>


 <div id="add">
    <h2>{
  {message}}</h2>
 </div>

  <script>
    const add = new Vue({
      el: '#add',
      data: {
        message: 'hello word',
      }
    })
  </script>

输出的结果是 hello word

mustache语法可以进行一些简单的表达式

  <script>
    const add = new Vue({
      el: '#add',
      data: {
        message: 'hello word',
        firstName: 'xiaoqiang',
        lastName: 'xionhong',
      }
    })
  </script>