首页 > 其他分享 >Vue3——ref定义响应式数据

Vue3——ref定义响应式数据

时间:2024-06-12 13:55:10浏览次数:23  
标签:name 角色 area weapon value 响应 Vue3 ref

ref作用

ref: 定义响应式变量,既可定义基础类型数据,也可以定义对象类型。

  • 语法格式:let temp = ref(初始值)
  • 返回值:temp是一个RefImpl的实例对象,简称ref对象,ref对象的value属性是响应式。
  • 注意点:
    • JS/TS中使用变量temp操作数据时,需要temp.value,但是在模板中不需要temp.value,直接使用temp即可。
    • 对于let name = ref("么么")来说,name不是响应式的,name.value是响应式的。

ref定义基础类型数据

如:string,number,boolean等

运行结果

代码

<template>
  <div>
    <h2> 数字:{{ n }} </h2>
    <h2> 信息:{{ str }} </h2>
    <button @click="alertInformation">显示信息</button>
    <button @click="add">加一</button>
  </div>
</template>

<!--Vue 3 setup语法糖 -->
<script setup lang='ts' name="App">
import { ref } from 'vue';

let n = ref(10);

let str = ref("Hello world!")

function alertInformation() {
  str.value += 1
  // alert(str.value);
  console.log(str.value);
}

function add() {
  n.value++;
  console.log(n.value);
}
</script>

<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}

button {
  margin: 0 5px;
}
</style>

ref定义对象类型数据

ref定义的对象类型数据,底层其实是调用了reactive

如:数组,自定义对象等



运行结果

代码

<template>
  <div class="root">
    <h2> 角色:{{ role }} </h2>
    <h2> 角色姓名:{{ role.name }} </h2>
    <h2> 角色地区:{{ role.area }} </h2>
    <h2> 角色武器:{{ role.weapon }} </h2>

    <button @click="changeRoleName">更改角色姓名</button>
    <button @click="changeRoleArea">更改角色地区</button>
    <button @click="changeRoleWeapon">更改角色武器</button>


    <div class="roles">

      <table>
        <th>角色姓名</th>
        <th>角色地区</th>
        <th>角色武器</th>
        <tr v-for="(r, index) in roles" :key="index">
          <td>{{ r.name }}</td>
          <td>{{ r.area }} </td>
          <td>{{ r.weapon }}</td>
        </tr>
      </table>

      <button @click="addRole">添加角色</button>
      <button @click="changFirstRoleWeapon">修改第一个角色武器</button>
    </div>
  </div>
</template>

<!--Vue 3 setup语法糖 -->
<script setup lang='ts' name="App">
import { ref } from 'vue';

interface Role {
  //角色名字
  name: string;
  //角色所属地区
  area: string;
  //角色武器
  weapon: string;
}

//可以填泛型,也可以不填泛型
let role = ref<Role>({
  name: "万叶",
  area: "稻妻",
  weapon: "苍古自由之誓"
})

const changeRoleName = () => {
  role.value.name = "雷电将军";
}

const changeRoleArea = () => {
  role.value.area = "枫原家";
}

const changeRoleWeapon = () => {
  role.value.weapon = "铁峰刺";
}

let roles = ref([
  {
    name: "万叶",
    area: "稻妻",
    weapon: "苍古自由之誓"
  },
  {
    name: "雷电将军",
    area: "稻妻",
    weapon: "薙草之稻光"
  },
  {
    name: "纳西妲",
    area: "须弥",
    weapon: "千叶浮梦"
  }
]);

function addRole() {
  roles.value.push({
    name: "迪卢克",
    area: "蒙德",
    weapon: "狼的末路"
  })
}

function changFirstRoleWeapon() {
  roles.value[0].weapon = "铁峰刺";
}
</script>

<style scoped>
.root {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}

.roles {
  background-color: rgb(211, 216, 218);
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}

h2 {
  width: 1000px;
}

button {
  margin: 0 5px;
}

div {
  margin: 10px;
}
</style>

标签:name,角色,area,weapon,value,响应,Vue3,ref
From: https://www.cnblogs.com/me-me/p/18243313

相关文章