vue的插值操作

Posted 高不高

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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>

 

以上是关于vue的插值操作的主要内容,如果未能解决你的问题,请参考以下文章

vue的插值操作

c_cpp 这个简单的代码片段显示了如何使用有符号整数在C中完成插值。 for()循环确定要插入的范围

1.vue的插值操作

Vue基础(干货+代码)

vue入门:(模板语法与指令)

vue系列教程:插值