You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
66 lines
2.0 KiB
66 lines
2.0 KiB
3 years ago
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<title>Vue监测数据改变原理_数组</title>
|
||
|
|
<script type="text/javascript" src="../vue.js"></script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div id="root">
|
||
|
|
<h2>学校名称：{{name}}</h2>
|
||
|
|
<h2>学校地址：{{address}}</h2>
|
||
|
|
<!-- <h2>校长：{{leader}}</h2>-->
|
||
|
|
<hr/>
|
||
|
|
<button @click="addSex">添加性别</button>
|
||
|
|
<h2>学生姓名：{{student.name}}</h2>
|
||
|
|
<h2>学生年龄：真实{{student.age.rAge}},对外{{student.age.sAge}}</h2>
|
||
|
|
<h2 v-if="student.sex">学生性别：{{student.sex}}</h2>
|
||
|
|
<!-- Vue.set(vm._data.student, 'sex', '男')-->
|
||
|
|
<!-- Vue.set(vm.student, 'sex', '男')-->
|
||
|
|
<!-- vm.$set(vm._data.student, 'sex', '男')-->
|
||
|
|
<h2>爱好</h2>
|
||
|
|
<ul>
|
||
|
|
<li v-for="(h, index) in student.hobby" :key="index">{{h}}</li>
|
||
|
|
</ul>
|
||
|
|
<h2>朋友</h2>
|
||
|
|
<ul>
|
||
|
|
<li v-for="(f,index) in student.friends" :key="index">
|
||
|
|
<h2>{{f.name}} - {{f.age}}</h2>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
<script type="text/javascript">
|
||
|
|
Vue.config.productionTip = false
|
||
|
|
const vm = new Vue({
|
||
|
|
el: '#root',
|
||
|
|
data: {
|
||
|
|
name: '哈哈',
|
||
|
|
address: '北京',
|
||
|
|
student: {
|
||
|
|
name: 'tom',
|
||
|
|
age: {
|
||
|
|
rAge: 40,
|
||
|
|
sAge: 29,
|
||
|
|
},
|
||
|
|
hobby: ['抽烟', '喝酒', '烫头'],
|
||
|
|
// push pop shift unshift splice sort reverse
|
||
|
|
// vm._data.student.hobby.push('学习')
|
||
|
|
// vm._data.student.hobby.shift('抽烟')
|
||
|
|
// vm._data.student.hobby.splice(0, 1, '打台球')
|
||
|
|
friends: [
|
||
|
|
{name: 'jerry', age: 35},
|
||
|
|
{name: 'tony', age: 28}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
addSex() {
|
||
|
|
Vue.set(this.student, "sex", "男")
|
||
|
|
// vm.$set(this.student, 'sex', '男')
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
</script>
|
||
|
|
</html>
|