image.png

{{ }} 显示值

用于在template属性中显示值其他属性定义的变量的值、函数返回的值、表达式的值

1、基本

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9. </head>
  11. <body>
  13.     <div id="app"></div>
  15.     <template id="my-app">
  16.             <!-- 这里会显示为：Hello World -->
  17.       <h2>{{message}}</h2>
  18.             <!-- 相当于<h2>Hello World</h2> -->
  19.     </template>
  21.     <script src="https://unpkg.com/vue@next"></script>
  22.     <script>
  23.         const App = {
  24.             template: '#my-app',
  25.             data() {
  26.                 return {
  27.                     message: "Hello World",
  28.                     counter: 100,
  29.                     isShow: true
  30.                 }
  31.             },
  32.             methods: {
  33.                 getReverseMessage() {
  34.                     return this.message.split(" ").reverse().join(" ");
  35.                 },
  36.                 toggle() {
  37.                     this.isShow = !this.isShow;
  38.                 }
  39.             }
  40.         }
  42.         Vue.createApp(App).mount('#app');
  43.     </script>
  44. </body>
  46. </html>

Mustache 标签将会被替代为对应数据对象上 message变量 的值。无论何时，绑定的数据对象上 message变量 发生了改变，插值处的内容都会更新。

2、计算表达式

  1. <template id="my-app">
  2.   <h2>{{counter * 10}}</h2>
  3.   <h2>{{ message.split(" ").reverse().join(" ") }}</h2>
  4. </template>

如果计算方式比较复杂，就不建议直接放这里，应该用计算属性
https://www.yuque.com/yejielin/mypn47/bilegi#EF7y8

3、显示函数返回值

  1. <template id="my-app">
  2.   <h2>{{getReverseMessage()}}</h2>
  3. </template>
  5. ...
  7.   <script src="../js/vue.js"></script>
  8.   <script>
  9.     const App = {
  10.       template: '#my-app',
  11.       data() {
  12.         return {
  13.           message: "Hello World",
  14.           counter: 100,
  15.           isShow: true
  16.         }
  17.       },
  18.       methods: {
  19.         getReverseMessage() {
  20.           return this.message.split(" ").reverse().join(" ");
  21.         },
  22.         toggle() {
  23.           this.isShow = !this.isShow;
  24.         }
  25.       }
  26.     }
  28.     Vue.createApp(App).mount('#app');
  29.   </script>

4、显示三元运算符的值

  1. <template id="my-app">
  2.   <!-- 4.三元运算符 -->
  3.   <h2>{{ isShow ? "哈哈哈": "" }}</h2>
  4. </template>

其他

语句、流程控制等不会生效