模版语法

发布时间 2024-01-01 18:49:18作者: 黑逍逍

文本插值:使用双大括号 {{ }} 来绑定数据到文本节点。

<template>
  <div id="counter"> <!-- 组件根元素通常不需要 id,除非你需要它来进行 DOM 操作 -->
    <h1>Counter Example</h1>
    <p>{{ name }}</p>
    <p>{{ age }}</p>
  </div>
</template>

<script>
export default {
  name: 'Counter',
  data() {
    return {
      name: 'mxx', // 假设这是一个名字,所以它应该是字符串
      age: 19     // 年龄通常是数字
    }
  }
}
</script>

<style>
/* 可以在这里添加一些样式 */
</style>

 

原始 HTML:使用 v-html 指令来输出原始 HTML。

 

属性绑定:使用 v-bind 或简写 : 来绑定 HTML 属性