Vue实现记事本简单功能(新增删除统计清空隐藏)
上次一些补充：
- V-for还可以？
- 在迭代属性输出的之前，对属性进行升序排序输出
html部分：
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<div id="app">
<ul>
<li v-for="n in object">
{
{ n }}
</li>
</ul>
</div>
js部分：
new Vue({
el: '#app',
data: {
object: {
2: '开心',
1: '难过',
0: '无奈'
}
}
})
//结果：按照012排列的一个列表：无奈 难过 开心
记事本新增：
- 前提解析
- 生成列表结构(V-for,字符串数组)
- 获取用户输入(v-model)
- 回车新增数据(v-on,enter添加)
- 代码
<body>
<!--主体区域-->
<section id="todoapp">
<!--输入框-->
<header class="header">
<h1>小歪记事本</h1>
<input v-model="inputValue" @keyup.enter="add" autofocus="autofocus" autocomplete="off" placeholder="请输入任务" class="new-todo">
</header>
<!--列表区域-->
<section class="main">
<ul class="todo-list">
<li class="todo" v-for="(item,index) in list">
<div class="view">
<span class="index">{
{index+1}}.</span>
<label>{
{item}}</label>
<button class="destroy"></button>
</div>
</li>
</ul>
</section>
<footer class="footer"></footer>
</section>
<!--底部-->
<footer class="info"></footer>
<!--开发环境版本包含有帮助的命令行警告-->>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app=new Vue({
el:"#todoapp",
data:{
list:["写代码","睡觉觉","陪真真"],
inputValue:"好好学习"
},
methods:{
add:function(){
this.list.push(this.inputValue);
}
}
})
</script>
</body>
- 代码解析：
- v-for 根据数组生成列表结构
- v-model 双向绑定数据，把表单数据和元素关联起来，取值
v-on
删除
- 前提解析
- 点击删除制定功能(v-on splice 索引)
复习：splice
- 代码
//只提新增的代码
//js部分
methods:{
add:function(){
this.list.push(this.inputValue);
},
remove:function(index){
console.log("删除");
console.log(index);
this.list.splice(index,1);
}
}
})
//HTML部分
<button class="destroy" @click="remove(index)"></button>
- 代码解析
- 数据改变和数据绑定的元素同步改变
- 事件的自定义参数
- splice()方法的作用（前面复习了，截图来自W3SCHOOL）
统计（列表元素个数）
- 前提解析
- 统计信息个数(v-text length)
- 代码
<span class="todo-count"> <strong>{
{ list.length}}</strong>item left</span><!--增加那里从3->4删除减少，数据同步变化-->
代码解析：基于数据的开发个数
清空
- 前提解析
- 点击清空所有信息(v-on清空数组)
- 代码
js部分：
clear:function(){
this.list=[];
}
html部分：
<button class="clear-completed" @click="clear">Clear</button>
隐藏
- 前提解析
- 没有数据时，隐藏数据(v-show,v-if 数组非空)
- 代码
<span class="todo-count" v-if="list.length!=0">
<button v-show="list.length!=0" class="clear-completed" @click="clear">Clear</button>
综合代码
<body>
<!--主体区域-->
<section id="todoapp">
<!--输入框-->
<header class="header">
<h1>小歪记事本</h1>
<input v-model="inputValue" @keyup.enter="add" autofocus="autofocus" autocomplete="off" placeholder="请输入任务" class="new-todo">
</header>
<!--列表区域-->
<section class="main">
<ul class="todo-list">
<li class="todo" v-for="(item,index) in list">
<div class="view">
<span class="index">{
{index+1}}.</span>
<label>{
{item}}</label>
<button class="destroy" @click="remove(index)"></button>
</div>
</li>
</ul>
</section>
<footer class="footer" v-show="list.length!=0"><!--隐藏父元素可以隐藏也可以不隐藏，不隐藏页面效果更好一些-->
<span class="todo-count" v-if="list.length!=0">
<strong>{
{ list.length}}</strong>item left</span><!--增加那里从3->4删除减少，数据同步变化-->
<button v-show="list.length!=0" class="clear-completed" @click="clear">Clear</button>
</footer>
</section>
<!--底部-->
<footer class="info"></footer>
<!--开发环境版本包含有帮助的命令行警告-->>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app=new Vue({
el:"#todoapp",
data:{
list:["写代码","睡觉觉","陪真真"],
inputValue:"好好学习"
},
methods:{
add:function(){
this.list.push(this.inputValue);
},
remove:function(index){
console.log("删除");
console.log(index);
this.list.splice(index,1);
},
clear:function(){
this.list=[];
}
}
})
</script>
</body>