2.0 vue3数据变量的修改
在上一篇中,已经学习了vue3中数据的声明,下面就该说一下数据的修改,话不多说直接上代码!<template><h1>个人信息</h1><h2>姓名:{{ name }}</h2><h2>年龄:{{ age }}</h2><h2>性别:{{ info.sex }}</h2><h2>
·
上一篇:vue3数据的声明https://blog.csdn.net/qq_42543244/article/details/122136377
在上一篇中,已经学习了vue3中数据的声明,下面就该说一下数据的修改,话不多说直接上代码!
<template>
<h1>个人信息</h1>
<h2>姓名:{{ name }}</h2>
<h2>年龄:{{ age }}</h2>
<h2>性别:{{ info.sex }}</h2>
<h2>身高:{{ info.height }}m</h2>
<h2>喜欢:{{ info.like }}</h2>
<h2>其他爱好:{{ hobby }}</h2>
<button @click="chaneUserInfo1">修改个人信息(one)</button>
<h2>------------------------------------------------</h2>
<h2>姓名:{{ person.name }}</h2>
<h2>年龄:{{ person.age }}</h2>
<h2>性别:{{ person.info.sex }}</h2>
<h2>身高:{{ person.info.height }}m</h2>
<h2>喜欢:{{ person.info.like }}</h2>
<h2>其他爱好:{{ person.hobby }}</h2>
<button @click="chaneUserInfo2">修改个人信息(two)</button>
</template>
<script>
import { ref, reactive } from "vue";
export default {
name: "App",
setup() {
// ----------------------ref声明数据-----------------------------
let name = ref("小明");
let age = ref(18);
let info = ref({
sex: "男",
height: 1.8,
like: "游泳",
});
let hobby = ref(["打篮球", "打游戏", "健身"]);
// --------------------reactive声明数据-----------------------------------
let person = reactive({
name: "小明",
age: 18,
info: {
sex: "男",
height: 1.8,
like: "游泳",
},
hobby: ["打篮球", "打游戏", "健身"],
});
/*
针对于ref声明的数据如何进行修改 注意注意注意: .value (在ref声明的数据里面,需要先通过.value才可以)
*/
function chaneUserInfo1() {
console.log(name);
console.log(info);
name.value = "小红";
age.value = 16;
info.value.sex = "女";
info.value.height = 1.6;
info.value.like = "跑步";
hobby.value[1] = "听音乐";
}
function chaneUserInfo2() {
console.log(person);
person.name = "小红";
person.age = 16;
person.info = {
sex: "女",
height: 1.6,
like: "跑步",
};
person.hobby[1] = "听音乐";
}
return {
name,
age,
info,
hobby,
person,
chaneUserInfo1,
chaneUserInfo2,
};
},
};
</script>
更多推荐
已为社区贡献14条内容
所有评论(0)