【Vue入门笔记】1-09 Vue的插值操作（合）

最新推荐文章于 2024-08-08 15:28:54 发布

宋船渔者

最新推荐文章于 2024-08-08 15:28:54 发布

阅读量84

点赞数

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

本文链接：https://blog.csdn.net/weixin_46099469/article/details/120160904

版权

vue 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

一、mustache 指令：（胡子、胡须的意思）也就是双大括号使用在content中

----》可用简易的计算、表达式

<h2>{{ message }}</h2>

二、v-once 指令：只显示初始值，不跟随改变

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

三、v-html 指令：以html的方法解释内容

url: '<a href="https://www.baidu.com">百度一下</a>'

四、 v-text 指令：为文本格式显示，少用，一般直接用 mustache

五、 v-pre 指令：原封不动展示标签内容，不显示值

<h2 v-pre>{{ message }}</h2>

六、 v-cloak 指令：斗篷，避免网页闪动

另： settimeout 设置延时

在vue解析之前，div中有一个属性 v-cloak

在vue解析之后，div中没有了属性 v-cloak

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

       <div id="app" v-cloak>
           <h2 v-once>{{ message }}</h2>
           <h2>{{ message }}</h2>
           <h2 v-pre>{{ message }}</h2>
           <h2>{{ message }}</h2>
           <h2 v-html="url"></h2>
       </div>

       <script src="../js/vue.js"></script>
       <script>
           setTimeout(function() {
           // let(变量) const(常量)
           const app = new Vue({
               el: '#app',
               data: {
                   message: '你好',
                   name: 'Leo',
                   url: '<a href="https://www.baidu.com">百度一下</a>'
               }
           })
           }, 3000);
       </script>
   </body>
</html>

来源：最全最新Vue、Vuejs教程，从入门到精通_哔哩哔哩_bilibili

宋船渔者

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【Vue入门笔记】1-09 Vue的插值操作（合）

一、mustache 指令：（胡子、胡须的意思）也就是双大括号----》可用简易的计算、表达式<h2>{{ message }}</h2>二、v-once 指令：只显示初始值，不跟随改变 <div id="app"> <h2 v-once>{{ message }}</h2> <h2>{{ message }}</h2>...
复制链接

扫一扫