注释很详细，直接上代码
新增内容
- v-for的基础应用
- v-for中index的提取方法
源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
#todo{
width: 300px;
height: 500px;
border-radius: 20px;
/* 渐变 */
background: linear-gradient(to bottom right,rgb(7, 241, 253), rgb(140, 248, 196));
box-shadow: 15px 15px 30px rgba(0, 0, 0, 0.5);
font-family: 楷体;
margin: 100px auto;
padding: 20px 10px;
box-sizing: border-box;
text-align: center;
}
#todo-list{
font-size: 20px;
font-weight: 600;
}
ul{
list-style: none;
}
li{
font-size: 19px;
font-weight: 400;
margin: 40px 50px;
background-color: #ffffff74;
height: 40px;
line-height: 40px;
border-radius: 20px;
/* 背景模糊 */
backdrop-filter: blur(10px);
}
</style>
</head>
<body>
<!-- 挂载点 -->
<div id="root">
<div id="todo">
<div id="todo-list">待办列表</div>
<ul>
<!-- 如果是需要其中的index，可以写成 (item, index) in list
温馨提醒，现在的其实是不完善的，且待后续博客
-->
<li v-for="item in todos">{{item}}</li>
</ul>
</div>
</div>
<!-- 导入vue的js代码 -->
<script src="./lib/vue2.js"></script>
<script>
const app = new Vue({// Vue实例
el: '#root',// 挂载点
data: {// 数据
todos:[
'吃饭','睡觉','敲代码','思考人生','阴暗中爬行'
]
},
methods: {// 方法
}
})
</script>
</body>
</html>
效果演示
