03-插值的操作

最新推荐文章于 2024-09-25 17:58:10 发布

青空95

最新推荐文章于 2024-09-25 17:58:10 发布

阅读量87

点赞数

分类专栏：前端文章标签： js vue javascript

本文链接：https://blog.csdn.net/weixin_41575397/article/details/109787945

版权

前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

01-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>{{firstname}} {{lastname}}</h2>
  <h2>{{counter * 2}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data:{
          message:'你好',
          firstname:'xiao',
          lastname:'feie',
          counter:100
        },
    })
</script>
</body>
</html>

02-v-once指令的使用

<!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>
  <h2>{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data:{
            message:'你好'
        }
    })
</script>
</body>
</html>

03-v-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:{
          message:'你好',
          url:'<a href="http://www.baidu.com">百度一下</a>'
        }
    })
</script>
</body>
</html>

04-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>
</div>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data:{
            message:'你好'
        }
    })
</script>
</body>
</html>

05-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:'你好'
        }
    })
</script>
</body>
</html>

06-v-cloak指令的使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    [v-cloak] {
      display: none;
    }
  </style>
</head>
<body>
<div id="app">
  <h2 v-cloak>{{message}}</h2>
</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:'你好'
        }
      })
    },1000)
</script>
</body>
</html>