vue--插值语法-JZTXT

vue--插值语法

我理解就是双括号语法，类似于jinja的绑定语法

vue3代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>插值语法,就是双括号语法</title>
<!--    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>-->
    <script src="./js/vue.js"></script>
</head>
<body>

<div id="app">
    {{message}}
    {{name}}
    {{name_list}}
    {{person_info}}
    <h2>{{link}}</h2>
    <h3>{{person_info.name}}</h3>
    <h3>{{person_info.age}}</h3>
    <h3>{{name_list[0]}}</h3>
    <h4>{{10+20+30}}</h4>
</div>
</body>


<script>
  const { createApp } = Vue
    var a=10>20?"是":"否"
    console.log(a)
  createApp({
    data() {
      return {
        message: 'Hello Vue!',
        name:'liqi',
        name_list:["张三","李四"],
        person_info:{name:'liqi',age:18},
        link:'<a href="www.baidu.com">点我</a>'
      }
    }
  }).mount('#app')

</script>
</html>

参考资料：