vue的插值操作

mustache语法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../vue.js"/>
</head>

<div id="app">
  <h2>{{message}}</h2>
  <h2>{{message}} ,sku</h2>
  <h2>{{firname+lasname}}</h2>
  <h2>{{firname+' '+lasname}}</h2>
  <h2>{{firname}} {{lasname}}</h2>
  <h2>{{2*count}}</h2>
</div>
<script>
  const vm = new Vue({

    el : '#app',
    data:{
      message:'hello',
      firname:'john',
      lasname:'bry',
      count:100
    }


  })
</script>
</body>
</html>

v-once

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../vue.js"/>
</head>

<div id="app">
  <h2>{{message}}</h2>
  <h2>{{message}} ,sku</h2>
  <h2>{{firname+lasname}}</h2>
  <h2>{{firname+' '+lasname}}</h2>
  <h2>{{firname}} {{lasname}}</h2>
  <h2>{{2*count}}</h2>
</div>
<script>
  const vm = new Vue({

    el : '#app',
    data:{
      message:'hello',
      firname:'john',
      lasname:'bry',
      count:100
    }


  })
</script>
</body>
</html>

v-html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<script src="../vue.js"></script>
<div id="app">
  <h2>{{url}}</h2>
  <h2 v-html="url"></h2>

</div>
<script>
  const vm = new Vue({

    el : '#app',
    data:{
      message:'hello',
      url:"<a href='https://www.baidu.com'>百度</a>",
    }


  })

</script>
</body>
</html>

v-text

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<script src="../vue.js"></script>
<div id="app">
  <h2>{{message}}</h2>
  <h2 v-text="message">jhvj</h2>

</div>
<script>
  const vm = new Vue({

    el : '#app',
    data:{
      message:'hello',
    }


  })

</script>
</body>
</html>

v-pre

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<script src="../vue.js"></script>
<div id="app">
  <h2>{{message}}</h2>
  <h2 v-text="message">jhvj</h2>

</div>
<script>
  const vm = new Vue({

    el : '#app',
    data:{
      message:'hello',
    }


  })

</script>
</body>
</html>

v-clock

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

  </style>
</head>
<body>

<script src="../vue.js"></script>
<div id="app" v-cloak>
  <h2>{{message}}</h2>

</div>
<script>
  //vue解析之前有v-cloak
  //vue解析之后无v-cloak
  setTimeout(function () {
    const vm = new Vue({

      el : '#app',
      data:{
        message:'hello',
      }


    })
  },1000)
</script>
</body>
</html>

 

posted @ 2021-04-03 10:10  好吗，好  阅读(120)  评论(0)    收藏  举报