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 实例的根数据对象。
浙公网安备 33010602011771号