RogerWorkPC
/
Vue_Demo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

完成数据监测学习

Browse Source
mac_study
roger 2 years ago
parent 5db242ae0d
commit e9bf42cc5f
7 changed files with 298 additions and 1 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 76
      12_列表筛选/10.总结Vue数据检测.html
  2. 2
      12_列表筛选/4.列表排序.html
  3. 48
      12_列表筛选/5.更新时的一个问题.html
  4. 25
      12_列表筛选/6.Vue检测数据改变的原理.html
  5. 25
      12_列表筛选/7.模拟一个数据监测.html
  6. 57
      12_列表筛选/8.Vue.set的使用.html
  7. 66
      12_列表筛选/9.Vue监测数据改变原理_数组.html

76
12_列表筛选/10.总结Vue数据检测.html
Unescape View File

@ -0,0 +1,76 @@
<!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">
<h1>学生信息</h1>
<button @click="student.age++">年龄+1</button><br/>
<button @click="addSex">添加性别属性，默认值-男</button><br/>
<button @click="student.sex='女'">修改性别</button><br/>
<button @click="addFriend">在列表首位添加一个朋友</button><br/>
<button @click="updateFriendName">修改第一个朋友的名字为：张三</button><br/>
<button @click="addHobby">添加一个爱好</button><br/>
<button @click="changeHobby">修改第一个爱好为：做模型</button><br/>
<button @click="filterHobby">过滤掉爱好中的抽烟</button><br/>
<h3>学生姓名：{{student.name}}</h3>
<h3>学生年龄：{{student.age}}</h3>
<h3 v-if="student.sex">学生性别：{{student.sex}}</h3>
<h3>爱好</h3>
<ul>
<li v-for="(h, index) in student.hobby" :key="index">{{h}}</li>
</ul>
<h3>朋友</h3>
<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
const vm = new Vue({
el: '#root',
data: {
student: {
name: 'tom',
age: 18,
hobby: ['抽烟', '喝酒', '烫头'],
friends: [
{name: 'jerry', age: 35},
{name: 'tony', age: 28}
]
}
},
methods: {
addSex() {
Vue.set(this.student, "sex", "男")
},
addFriend() {
this.student.friends.unshift({name: 'honey', age: 11})
},
updateFriendName() {
// this.student.friends[0].name = "张三"
this.student.friends.splice(0,1, {name: "张三", age: 33})
},
addHobby() {
this.student.hobby.push('吃火锅')
},
changeHobby() {
// this.student.hobby.splice(0,1,'做模型')
this.$set(this.student.hobby, 0, '做模型')
},
filterHobby() {
this.student.hobby = this.student.hobby.filter((h) => {
return h !== "抽烟"
})
}
}
})
</script>
</html>

2
12_列表筛选/4.列表排序.html
Unescape View File

@ -2,7 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>列表过滤</title> <title>列表排序</title>
<script type="text/javascript" src="../vue.js"></script> <script type="text/javascript" src="../vue.js"></script>
</head> </head>
<body> <body>

48
12_列表筛选/5.更新时的一个问题.html
Unescape View File

@ -0,0 +1,48 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>更新时的一个问题</title>
<script type="text/javascript" src="../vue.js"></script>
</head>
<body>
<div id="root">
<!-- 遍历列表-->
<h2>人员列表</h2>
<button @click="updateMei">更新马冬梅信息</button>
<ul>
<li v-for="(data, index) in listData" :key="data.id">
{{data.name}} - {{data.age}} - {{data.sex}}
</li>
</ul>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false
// 使用computed实现
const vm = new Vue({
el: "#root",
data: {
keyword: '',
sortType: 0, // 0-原顺序 1-年龄降序 2-年龄升序
listData: [
{id: 1, name: '马冬梅', age: 25, sex: '女'},
{id: 2, name: '周冬雨', age: 19, sex: '女'},
{id: 3, name: '周杰伦', age: 20, sex: '男'},
{id: 4, name: '温兆伦', age: 17, sex: '男'}
],
},
methods: {
updateMei() {
// this.listData[0].name = '马老师'
// this.listData[0].age = 55
// this.listData[0].sex = '男'
// this.listData[0] = {id: 1, name: '马老师', age: 55, sex: '男'}
this.listData.splice(0, 1, {id: 1, name: '马老师', age: 55, sex: '男'} )
}
}
})
</script>
</html>

25
12_列表筛选/6.Vue检测数据改变的原理.html
Unescape View File

@ -0,0 +1,25 @@
<!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>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false
const vm = new Vue({
el: '#root',
data: {
name: '哈哈',
address: '北京',
}
})
</script>
</html>

25
12_列表筛选/7.模拟一个数据监测.html
Unescape View File

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模拟一个数据监测</title>
<script type="text/javascript" src="../vue.js"></script>
</head>
<body>
<div id="root">
<h2>学校名称：{{name}}</h2>
<h2>学校地址：{{address}}</h2>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false
const vm = new Vue({
el: '#root',
data: {
name: '哈哈',
address: '北京',
}
})
</script>
</html>

57
12_列表筛选/8.Vue.set的使用.html
Unescape View File

@ -0,0 +1,57 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue.set的使用</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="(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,
},
friends:[
{name: 'jerry', age: 35},
{name: 'tony', age: 28}
]
}
},
methods: {
addSex() {
Vue.set(this.student, "sex", "男")
// vm.$set(this.student, 'sex', '男')
}
}
})
</script>
</html>

66
12_列表筛选/9.Vue监测数据改变原理_数组.html
Unescape View File

@ -0,0 +1,66 @@
<!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>
Write Preview
Loading…
Cancel
Save