Vue3导包 渲染数据 定义数据

Home.vue

点击查看代码

<template>
  <div>
    <div style="font-size: 20px;font-weight: bold;color: red;
                text-decoration: underline;font-style: italic;margin-bottom: 20px" >
      回答我i降低为
    </div>

    <div style="margin-bottom: 20px">
      {{count}}
    </div>

    <div>
      {{data.a }}
      {{data.b }}
    </div>

  </div>
</template>

<script setup>
// ref 创建响应式数据
import {ref ,reactive} from "vue";
const count = ref(1);
const c=ref("dhw ")
const data=reactive({
  a:123,
  b:"dad",
})
</script>

对话框 双向绑定

点击查看代码

<div>
<!--      对话框-->
      <!--      v-model 双向绑定(发生时事变化)-->
      <input v-model="c" />
    </div>

判断v-if

点击查看代码

<div>
      <span style="color: red" v-if="data.name==='huh'">设计大奖</span>
      <span style="color: darkblue" v-if="data.name==='hwh'">从我看</span>
    </div>

v-for

点击查看代码

<div style="display: flex">
      <div style="width: 300px;height: 300px;text-align: center;line-height: 300px;
      font-size: 30px;margin-right: 10px;background-color: aquamarine" v-for="item in data.arr">{{item}}</div>
      <div style="width: 300px;height: 300px;text-align: center;line-height: 300px;font-size: 30px;margin-right: 10px;background-color: aquamarine">2</div>
      <div style="width: 300px;height: 300px;text-align: center;line-height: 300px;font-size: 30px;margin-right: 10px;background-color: aquamarine">3</div>
    </div>

<div>
      <select style="width: 200px">
        <option v-for="item in data.fruits">{{item}}</option>
      </select>
    </div>

@(v-on:) @click
(点击事件）+函数

点击查看代码

const click=()=>{
  alert("嘿嘿嘿")
}//在script中

 <div>
      <button v-on:click="click">点位嘿嘿嘿</button>
    </div>

点击查看代码

<div style="display: flex;margin-bottom: 20px">
      <div @click="show(item)" v-for="item in data.arr"
          style="width: 300px;height: 300px;text-align: center;line-height: 300px;font-size: 30px;margin-right: 10px;background-color: aquamarine">{{item}}</div>
      <div style="width: 300px;height: 300px;text-align: center;line-height: 300px;font-size: 30px;margin-right: 10px;background-color: aquamarine">2</div>
      <div style="width: 300px;height: 300px;text-align: center;line-height: 300px;font-size: 30px;margin-right: 10px;background-color: aquamarine">3</div>
    </div>

const show=(value)=>{
  alert(value)
}

动态绑定(:XXX=“”)

点击查看代码

<div>
      <div :style="data.box"></div>
    </div>

box:{
    width:'100px',
    height:'100px',
    backgroundColor:'red'
  }

onMounted在页面元素加载完成后触发

点击查看代码

import {onMounted} from "vue";
onMounted(() => {
  alert("页面加载完成")
})