<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
{{msg}}
<button @click="handler">按钮</button>
<br>
<!-- 文字 字文-->
{{msg2.split('').reverse().join('')}}
<br>
{{reverseMsg2}}
<br>
<ul>
<li v-for="stu in stus">{{stu.name}}</li>
</ul>
<ul>
<li v-for="boy in boys">{{boy.name}}</li>
</ul>
</div>
<script src="./vue.js"></script>
<script>
// mvvm
/*
Vue是数据响应式的
只要data发生变化，页面上对应内容也会跟着改变
*/
const app = new Vue({
el: '#app',
data: {
msg: '数据',
msg2: "Hello Vue!",
stus: [
{
name: '张三',
sex: '女'
}, {
name: '李四',
sex: '女'
}, {
name: '王五',
sex: '男'
}, {
name: '赵六',
sex: '男'
}
]
},
methods: {
// 事件的函数
handler () {
console.log(1)
},
// 正常的函数
init () {
console.log('页面加载就会执行')
}
},
computed: {
// computed在模板中使用时和data一模一样
// 1 当表达式过于复杂时
reverseMsg2 () {
return this.msg2.split('').reverse().join('')
},
// 2 想要根据data生成一些新的数据时
boys () {
/* const boysArr = []
for (let i = 0; i < this.stus.length; i++) {
if (this.stus[i].sex === '男') {
boysArr.push(this.stus[i])
}
}
return boysArr */
// filter
/*
arr.filter生成的是一个新的数组
arr = [1,2,3,4,5]
arr.filter(num => num % 2 === 0)
*/
return this.stus.filter(stu => stu.sex === '男')
}
},
created () {
this.init()
}
})
</script>
</body>
</html>
