<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
<style>
#app{
width: 500px;
margin:200px auto;
border: 1px solid #ccc;
padding: 10px;
border-radius: 10px;
box-shadow: 0 0 10px #ccc;
}
#app h2{
text-align: center;
margin-bottom: 10px;
}
#app ul{
list-style: none;
padding: 0;
margin: 0;
margin-top: 10px;
border-top: 1px solid #ccc;
}
#app li{
padding: 10px;
border-bottom: 1px solid #ccc;
cursor: pointer;
transition: all 0.5s;
background-color: #f5f5f5;
}
#app li:hover{
background-color: #ccc;
}
#app input{
margin-bottom: 10px;
width: 85%;
height: 30px;
}
#app button{
margin-left: 10px;
height: 30px;
}
#app li button{
float: right;
}
</style>
</head>
<body>
<div id="app">
<h2>记事本</h2>
<input type="text" v-model="active" placeholder="请输入内容">
<button @click="add">添加</button>
<ul>
<li v-for="(item,index) in items" :key="item.id">
<span>
{{(index+1)+'.'}}
</span>
{{item.name}}
<button @click="del(item.id)">删除</button>
</li>
</ul>
<div style="margin-top: 10px;">
<span style="margin-left: 10px;">总计：{{items.length}}</span>
<button style="float: right;margin-right: 10px;width: 9%;height: 25px;margin-top: 3px;margin-bottom:2px;" @click="clear">清空</button>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" ></script>
<script>
var app=new Vue({
el: '#app',
data: {
items: [
{id:1,name:'唱跳'},
{id:2,name:'rap'},
{id:3,name:'篮球'}
],
active:'',
},
methods:{
add(){
if(this.active){
this.items.push({
id:+new Date(),
name:this.active
})
this.active=''
}
else{
alert('请输入内容')
}
},
del(id){
this.items=this.items.filter(item=>item.id!==id)
console.log(id)
},
clear(){
this.items=[]
}
},
})
</script>
</body>
</html>这段代码是一个简单的记事本应用，使用Vue.js实现了添加、删除、清空功能。下面逐行解析代码：
-
<!DOCTYPE html>：声明这是一个HTML文档。 -
<html>：HTML文档的根元素。 -
<head>：头部元素，用于定义文档的一些元数据，如字符编码、标题、样式表等。 -
<meta charset="utf-8">：声明文档使用的字符编码为UTF-8。 -
<meta http-equiv="X-UA-Compatible" content="IE=edge">：告诉IE浏览器使用最新的渲染引擎。 -
<title></title>：文档的标题，这里为空。 -
<meta name="description" content="">：文档的描述，这里为空。 -
<meta name="viewport" content="width=device-width, initial-scale=1">：设置文档的视口，使其能够在不同设备上正常显示。 -
<link rel="stylesheet" href="">：引入样式表，这里为空。 -
<style>：内部样式表，样式定义在这个标签里。 -
#app{...}：定义了一个id为app的元素的样式。 -
<body>：文档的主体部分。 -
<div id="app">：一个id为app的div元素，这里将作为Vue实例的挂载点。 -
<h2>记事本</h2>：一个h2标签，显示标题。 -
<input type="text" v-model="active" placeholder="请输入内容">：一个文本输入框，使用v-model指令与Vue实例的active属性进行双向绑定。 -
<button @click="add">添加</button>：一个按钮，点击时调用Vue实例的add方法。 -
<ul>：一个无序列表，用于显示记事本条目。 -
<li v-for="(item,index) in items" :key="item.id">：一个li标签，使用v-for指令遍历Vue实例的items数组，并将每个数组项显示为一个li元素。 -
<span>{{(index+1)+'.'}}</span>：一个span标签，显示序号(index+1)。 -
{{item.name}}：显示每个条目的name属性。 -
<button @click="del(item.id)">删除</button>：一个按钮，点击时调用Vue实例的del方法，传入item.id作为参数。 -
<div style="margin-top: 10px;">：一个div元素，用于显示总计和清空按钮。 -
<span style="margin-left: 10px;">总计：{{items.length}}</span>：一个span标签，显示总条目数(items数组的长度)。 -
<button style="float: right;margin-right: 10px;width: 9%;height: 25px;margin-top: 3px;margin-bottom:2px;" @click="clear">清空</button>：一个按钮，点击时调用Vue实例的clear方法。 -
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>：引入Vue.js库。 -
<script>：内部脚本，JavaScript代码定义在这个标签里。 -
var app=new Vue({...})：创建一个Vue实例，将其赋值给变量app。 -
el: '#app'：将Vue实例挂载到id为app的元素上。 -
data: {...}：定义Vue实例的数据对象。 -
items: [...]：定义一个数组items，用于存储记事本的条目。 -
active: ''：定义一个字符串active，用于存储用户输入的内容。 -
methods: {...}：定义Vue实例的方法。 -
add(){...}：add方法，用于向items数组添加一个新的条目。 -
del(id){...}：del方法，用于删除指定id的条目。 -
clear(){...}：clear方法，用于清空items数组。 -
</script>：脚本结束标签。
整个代码使用Vue.js实现了一个简单的记事本应用，包括添加条目、删除条目、清空条目等功能。使用Vue的数据绑定和方法调用，实现了视图与数据的双向同步。
本站资源均来自互联网，仅供研究学习，禁止违法使用和商用，产生法律纠纷本站概不负责！如果侵犯了您的权益请与我们联系！
转载请注明出处： 免费源码网-免费的源码资源网站 » vue初使用实例之笔记本
发表评论 取消回复