插值

通过{{}}进行包裹名称的方式来插入值，称之为插值表达式。
插值形式：

  • 文本
  • 原始HTML
  • 使用JavaScript

文本

和之前的案例一样，不再啰嗦

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <link rel="stylesheet" href="../lib/bulma.css">
  7. </head>
  8. <body>
  9. <div id="app"  class="container">
  10.     <span>{{msg}}</span>
  11. </div>
  13. <script src="../lib/vue.js"></script>
  14. <script>
  15.     var data = {
  16.       msg:'我的剑就是你的剑'
  17.     };
  18.     var vm = new Vue({
  19.         el:'#app',
  20.         data:data
  22.     })
  24. </script>
  25. </body>
  26. </html>

html

如果要展示的内容是带标签的呢？

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <link rel="stylesheet" href="../lib/bulma.css">
  7. </head>
  8. <body>
  9. <div id="app"  class="container">
  10.     <span>{{msg}}</span>
  11. </div>
  13. <script src="../lib/vue.js"></script>
  14. <script>
  15.     var data = {
  16.       msg:'<h1>我的剑就是你的剑</h1>'
  17.     };
  18.     var vm = new Vue({
  19.         el:'#app',
  20.         data:data
  22.     })
  24. </script>
  25. </body>
  26. </html>

image.png

效果

image.png

显然无法将其渲染为一个真正的标签，vue提供了v-html指令可以达到解释为标题的效果

新的方式

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <link rel="stylesheet" href="../lib/bulma.css">
  7. </head>
  8. <body>
  9. <div id="app"  class="container">
  10.     <div v-html="msg"></div>
  11. </div>
  13. <script src="../lib/vue.js"></script>
  14. <script>
  15.     var data = {
  16.       msg:'<h1>我的剑就是你的剑</h1>'
  17.     };
  18.     var vm = new Vue({
  19.         el:'#app',
  20.         data:data
  22.     })
  24. </script>
  25. </body>
  26. </html>

效果

image.png

JavaScript的使用

在插值表达式中，可以根据数据类型进行相应的运算

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <link rel="stylesheet" href="../lib/bulma.css">
  7. </head>
  8. <body>
  9. <div id="app"  class="container">
  10.     <div >{{msg.toUpperCase()}}</div>
  11. </div>
  13. <script src="../lib/vue.js"></script>
  14. <script>
  15.     var data = {
  16.       msg:'Love is good'
  17.     };
  18.     var vm = new Vue({
  19.         el:'#app',
  20.         data:data
  22.     })
  24. </script>
  25. </body>
  26. </html>

image.png

效果

image.png