1-模板语法和vue指令

 

 

<template>
  <div>{{ message }}</div>
  <div>{{ num ? '现实' : '隐藏' }}</div>
  <div @click="parent">
    <button @click.stop="clickTab">点击button</button>
  </div>

  <div :style="style">绑定style</div>

  <div :class="[ flag ? 'a' : 'b' ]">绑定class</div>

  <div v-for="(item, index) in Arr" :key="index">{{ item }}</div>

  <input v-model="msg" type="text" />
  <div>{{ msg }}</div>
</template>

<script setup lang="ts">
//定义变量
const message:string = '测试我的内容'
const num:number = 1

//阻止冒泡
const parent = () => {
  console.log('我是父级')
}
const clickTab = () => {
  console.log('我是子级')
}

//绑定颜色
type Style = {
  color: string,
  height: string,
  background: string,
}

const style:Style = {
  color: 'red',
  height: '300px',
  background: 'rgba(0, 0, 0, 0.1)'
}

//绑定class
const flag:boolean = false

//v-for循环数组
const Arr:Array<number> = [1, 2, 3, 4, 5]

//双向绑定
import { ref } from 'vue'
const msg = ref('default')
</script>

<style scoped>
.a {
  color: red;
}

.b {
  color: blue;
}
</style>