Vue基础知识-模板语法

Vue基础知识-模板语法

一、双括号表达式{ {}}

• 向页面输出数据
• { {}}内部是变量、对象调用、表达式
• 变量、对象调用、表达式 一定要有具体的结果

如下图，这里是固定写法，使用钩子data，return出去，然后在上面用{ {}}进行引用，进行渲染，见下面示例：直接使用，也可以进行表达式

<template>
  <div>
<!--    <h1>我是一个组件</h1>-->
    <h3>双括号表达式</h3>
    <div>{
  {intro}}</div> <!-- 直接使用 -->
    <div>{
  {intro.toUpperCase()}}</div> <!--   表达式-->
  </div>
</template>

<script>
export default {
  name: "Template",
  data(){
    return{
      intro: "hello, hello!"
    }
  }
}
</script>

<style scoped>

</style>