| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Vue检查数据改变的原理_数组</title>
- <!-- 引入vue -->
- <script type="text/javascript" src="../js/vue.js"></script>
- </head>
- <body>
- <!-- 准备好一个容器 -->
- <div id="root">
- <h1>学校信息</h1>
- <h2>学校名称：{{school.name}}</h2>
- <h2>学校地址：{{school.address}}</h2>
- <h2>校长是:{{school.leader}}</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.rAge}}</h2>
- <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">
- {{f.name}}--{{f.age}}
- </li>
- </ul>
- </div>
-
- </body>
- <script type="text/javascript">
- Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示
- const vm = new Vue({
- el: '#root',
- data: {
- school:{
- name:'尚硅谷',
- address:'北京',
- },
- student:{
- name:'tom',
- age:{
- rAge:40,
- sAge:29
- },
- hobby:['抽烟','喝酒','烫头'],
- friends:[
- {name:'jerry',age:35},
- {name:'tony',age:36}
- ]
- }
- },
- methods: {
- addSex(){
- // Vue.set(this.student,'sex','男')
- this.$set(this.student,'sex','男')
- }
- },
- })
- </script>
- </html>
|
