vue--day17---Vue.set()

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vue.set()</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">


<h1>学校信息</h1>
<h2>学校名称{{name}}</h2>
<h2>学校地址{{adress}}</h2>
<hr/>

<h1>学生信息</h1>
<button @click="addSex">添加一个性别属性,默认是男</button>
<h2>姓名{{student.name}}</h2>
<h2 v-if="student.sex"> 性别{{student.sex}}</h2>

<h2>年龄 真实{{student.age.rAge}}, 对外{{student.age.sAge}}</h2>

<h2>朋友们</h2>
<li v-for="(f,index) in student.friends" :key="index">
{{f.name}}-{{f.age}}-{{f.sex}}
</li>
</div>

<script type="text/javascript">
const vm=new Vue({
el: "#root", //el用于指定当前vue实例为那个容器服务,但通常为css选择器字符串
data: {
//data 用于存储数据,数据供el 所指定的容器去使用,我们暂时写成一个对象
name: "尚硅谷99999",
adress:"北京",
student: {
name: "tom",
age: {
rAge: 40,
sAge: 29,
},
friends:[
{ name: "jettty", age: 35 },
{ name: "tonny", age: 36 },
],

},
 
},
methods:{
addSex(){
//Vue.set(this.student,'sex',"男")
this.$set(this.student,'sex',"男")
}
}

});
</script>
</body>
</html>
 
//向响应式对象中添加一个 property,并确保这个新 property 同样是响应式的,且触发视图更新。它必须用于向响应式对象上添加新 //property,因为 Vue 无法探测普通的新增 property (比如 this.myObject.newProperty = 'hi')
//注意对象不能是 Vue 实例,或者 Vue 实例的根数据对象。
posted @ 2023-07-16 00:40  雪落无痕1  阅读(6)  评论(0编辑  收藏  举报