Vue——插值操作（指令的使用）

最新推荐文章于 2022-07-10 23:51:32 发布

just-so-so.

最新推荐文章于 2022-07-10 23:51:32 发布

阅读量159

点赞数

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

本文链接：https://blog.csdn.net/weixin_43911280/article/details/104252691

版权

vue 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

Mustache指令的使用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
   <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:'kebi',
        lastName:'bfhh',
        counter:100
      }
    })
</script>
</body>
</html>

v-once指令的使用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h2>{{message}}</h2>
    <!--v-once：不会跟着数据的改变而改变（除了第一次的设置） ，后面没有跟表达式-->
    <h2 v-once>{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
      el:'#app',
      data:{
        message:'你好啊'
      }
    })
</script>

</body>
</html>

v-html指令的使用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
   <h2> {{url}}</h2>
    <!-- v-html：表示一html的形式展现出来-->
    <h2 v-html="url"></h2>

</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
      el:'#app',
      data:{
        message:'你好啊',
        url:'<a href="http://www.baidu.com">百度一下</a>'
      }
    })
</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>
    <!-- v-text：展示文本（不灵活）-->
    <h2 v-text="message"></h2>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
      el:'#app',
      data:{
        message:'你好啊'
      }
    })
</script>
</body>
</html>

v-pre指令的使用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h2>{{message}}</h2>
    <!--v-pre：将内容原封不动的显示出来，不改变 -->
    <h2 v-pre>{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
      el:'#app',
      data:{
        message:'你好啊'
      }
    })
</script>
</body>
</html>

v-cloak指令的使用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    [v-cloak] {
        display: none;<!-- 表示什么都不出现 -->
    }
</style>
<body>
<div id="app" v-cloak>
    <!-- v-cloak：（斗篷） 表示将原来的东西遮掩-->
    <h2>{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
    //延迟出现setTimeout
    //在vue解析之前，div中有一个属性v-cloak
    //在vue解析之后，div中没有一个属性v-cloak
    setTimeout(function () {
      const app = new Vue({
        el:'#app',
        data:{
          message:'你好啊'
        }
      })
    },1000)
</script>
</body>
</html>

just-so-so.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue——插值操作（指令的使用）

Mustache指令的使用：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app"> <h2...
复制链接

扫一扫