vue3基本指令使用

<script setup lang="ts">
import {ref} from 'vue' //响应式数据
const num: number = 1
const arr1: number[] = [1, 2, 3, 4, 5]
const str: string = "我是一段文字"
const htmlstr: string = '<section style="color:red">我是一个section</section>'
const flag: boolean = true
const flagStr: string = 'd'

const id1: string = "id1"

const strRef = ref("响应式绑定")
const cls: boolean = false

const arr2: string[] = ['a', 'b']
const click1 = () => {
  console.log("点击")
}
const parent = () => {
  console.log("父级点击")
}

const style1 = {
  color: 'red',
  border: '1px solid #ccc'
}

</script>

<template>
  <div>
    <!--  插值-->
    {
   
   { num }}
    <!--  数值运算-->
    {
   
   { num + 2 }}
    <!--  三元-->
    {
   
   { num ? 'true' : 'false' }}
  </div>
  <div>
    <!--    qpi调用-->
    {
   
   { arr1.map(v => ({num: v})) }}
  </div>
  <div v-text="str"></div>
  <div v-html="htmlstr"></div>
  <div v-if="flag">true</div>
  <div v-show="flag">true</div>
  <div v-if="flagStr=='a'">a</div>
  <div v-else-if="flagStr=='b'">b</div>
  <div v-else> other</div>
  <button v-on:click="click1">点击按钮</button>
  <button @click="click1">点击按钮2</button>
  <div @click="parent">
    <button @click.stop="click1">点击按钮3</button>
  </div>
  <div v-bind:id="id1">演示 v-bind</div>
  <div id="id1" :style="style1">演示 v-bind</div>
  <div class="c" :style="[cls?'a':'b']">演示 v-bind</div>
  <div>
    <input v-model="strRef" type="text">
    <div>{
   
   { strRef }}</div>
  </div>
  <div>

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

<style scoped lang="less">
.a {
  color: red;
}

.b {
  border: 1px solid #ccc;
}

.c {
  background-color: aqua;
}
</style>
猜你喜欢
