Vue - 用Vue写一个TodoList小栗子

迈不过友情╰ 2022-12-19 13:10 135阅读 0赞

**推荐：**[Vue汇总][Vue]

## Vue - 用Vue写一个TodoList小栗子 ##

**需求**

*  在输入框中输入计划，点击提交，可以加入计划`List`的最前面。
 *  避免输入全是空格。
 *  避免点击按钮的冒泡事件。

**代码**

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title>TodoList</title>
    		<script src="./js/vue.js"></script>
    	</head>
    	<body>
    		<div id="div">
    			<input v-model.trim="inputValue" type="text">
    			<button @click.stop="bntClick">提交</button>
    			<ul>
    				<li v-for="item in list" :key="item.id">{
       {item.value}}</li>
    			</ul>
    		</div>
    	</body>
    </html>
    <script> var vue = new Vue({ el: '#div', data: { inputValue: '', id: 1, list: [] }, methods: { bntClick(){ if(this.inputValue !== ''){ this.list.unshift({ id: this.id++, value: this.inputValue }); this.inputValue = ''; } else{ alert('写点东西再交'); } } } }) </script>

如果代码中有没见过的修饰符或者`API`，可以去最前面的推荐部分看一下相关博客，博客里面都介绍的很详细。

**效果**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTYwNjAz_size_16_color_FFFFFF_t_70]  
输入都是空格，直接警告，`v-model.trim`起到了作用。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTYwNjAz_size_16_color_FFFFFF_t_70 1]

输入计划，点击提交。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTYwNjAz_size_16_color_FFFFFF_t_70 2]  
避免点击按钮的冒泡事件，`@click.stop`起了作用，虽然这里的例子不避免点击按钮的冒泡事件也没关系。

写博客是博主记录自己的学习过程，如果有错误，请指正，谢谢！

[Vue]: https://kaven.blog.csdn.net/article/details/109508022
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTYwNjAz_size_16_color_FFFFFF_t_70]: /images/20221120/9389c78d78ac4e1b8ceffbb94d50e602.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTYwNjAz_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20201107182003247.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTYwNjAz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTYwNjAz_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20201107181821688.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTYwNjAz,size_16,color_FFFFFF,t_70