vue记事本
2022-01-12 14:42:57 更新 浏览量: 598
| 本章 | 下一章：vue轮播图 |
vue记事本
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-model记事本</title>
<link type="text/css" href="https://www.qianduan.cn/chajian/css/style2.css" rel="stylesheet" />
</head>
<body>
<!-- 新增（1、生成列表结构 v-for 和数组 2、获取用户输入 v-model 3、回车，新增数据 v-on .enter）
--删除（数据改变和数据绑定的元素是同步变化的；时间的自定义参数；splice方法的应用）
---计数（统计信息个数length）
--清除(点击清除所有信息 v-on)
---隐藏 (没有数据时隐藏 v-if v-show)
-->
<div id="box">
<div class="head">
<h2>拾忆记事本</h2>
<p>记录生活点点滴滴，写下生活每一个美好</p>
<div class="input">
<span>内容</span><input type="text" v-model.trim="mrvalue" @keyup.enter="add" placeholder="请输入你要记事的内容"/><span @click="add">确认</span>
</div>
</div>
<ul class="list">
<!-- v-for循环列出列表 -->
<li v-for="(item,index) in list">
<!-- 前面的序号 -->
<span class="xh">{{index+1}}</span>
<!-- 列表内容 -->
<span>{{item}}</span>
<!-- 关闭按钮 -->
<!-- 添加点击移除事件，要传形参 -->
<span class="qc" @click="remove(index)"></span>
</li>
<li v-if="list.length!=0">
<b>
总数：{{list.length}}
</b>
<b @click="clear">清除</b>
</li>
<li v-else>
暂无数据
</li>
</ul>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://www.qianduan.cn/chajian/js/vue.min.js"></script>
<script>
var top= new Vue({
el:"#box",
data:{
list:["学习","吃饭","睡觉"],
mrvalue:""
},
methods:{
// 输入添加
add(){
if(this.mrvalue.length != 0){
this.list.push(this.mrvalue);
}
this.mrvalue = "";
},
// 将索引传递过来
remove(index ){
// console.log("删除");
// console.log(index);
// 按照索引删除
this.list.splice(index,1);
},
clear(){
this.list=[];
}
}
})
</script>
<!--
总结：
列表结构可以通过v-for 指令结合数据data获取
v-on 结合事件修饰符可以对使劲按进行限制，比如.enter
v-on 在绑定事件时可以传递自定义参数
通过v-model 可以快速的设置和获取表单元素的值
基于数据的开发方式
-->
</body>
</html>
运行效果如下图：
| 本章 | 下一章：vue轮播图 |
陕公网安备 61012402000223号