<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<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>
<style>
* {
padding: 0px;
margin: 0px;
/*border: 1px solid blue;*/
}
#content {
width: 450px;
height: 400px;
/* border: 1px solid red; */
}
ul {
background: lightgreen;
list-style: none;
width: 600px;
font-size: 0px;
}
li {
display: inline-block;
width: 150px;
height: 80px;
text-align: center;
line-height: 80px;
background: pink;
font-size: 18px;
}
div div {
width: 600px;
height: 320px;
background: green;
}
.blue {
background: blue;
}
</style>
</head>
<body>
<!--
1、创建页面 数据
2、通过指令实现页面数据的关联
3、修改数据达到效果
-->
<div id="content">
<ul>
<li :class='sel===item?"blue":""' @click='select(item)' v-for='(item,index) in list' :key='index'>{{item}}</li>
</ul>
<div v-show="sel===item?true:false" v-for="(item,index) in list">{{item}}</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el:"#content",
data:{
list:['海贼','火影','柯南','奥特曼'],
sel:'海贼'
},
methods: {
select(item){
this.sel=item
}
}
})
</script>
</body>
</html>
todolist
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
</style>
</head>
<body>
<!--
1.创建页面 数据
2.通过指令实现页面和数据的额关联
3.修改数据到达效果
-->
<div id="content">
<input type="text" v-model='devent'>
<span @click='add'>添加事项</span>
<ul>
<li :style="item.state?fcolor:dcolor" v-for='(item,index) in arr' :key='index'>
<p>{{item.devent}}</p>
{{item.state}}
<button @click='del(index)'>删除</button>
<button @click="fin(index)" v-if='!item.state'>完成</button>
<span v-else>已完成</span>
</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el: '#content',
data: {
arr: [{ devent: '今天100行代码', state: true },
{ devent: '今天500行代码', state: false },
{ devent: '今天1000行代码', state: false },
{ devent: '今天5000行代码', state: false }],
devent: '',
fcolor: {
background: 'green'
},
dcolor: {
background: 'pink'
}
},
methods: {
add() {
this.arr.push({ devent: this.devent, state: false })
},
del(index) {
this.arr.splice(index, 1)
},
fin(index) {
this.arr[index].state = true
}
}
})
/*
todolist 功能分析
1.显示事项列表
2.能添加事项
3.能删除事项
4.完成事项
5. 分类显示 （已完成，为完成）
*/
</script>
</body>
</html>
简单过滤器
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<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="content">
{{nowTime}}
<hr>
{{nowTime|time}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
//创建过滤器
//Vue.filter(名字，处理数据的函数)
Vue.filter('time',function(val){//val要过滤的数据
//数据处理
let result = new Date(val).getFullYear()+'/'+(new Date(val).getMonth()+1+'/')+new Date(val).getDate()
return result
})
let vm = new Vue({
el:"#content",
data:{
nowTime:Date.now()
},
methods:{
getTime(){
let val = this.nowTime
let result = new Date(val).getFullYear()+'/'+(new Date(val).getMonth()+1+'/')+new Date(val).getData()
getDate()
//将结果返回
return result
}
}
})
</script>
</body>
</html>
3118
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
