vue实现简易留言板（todolist）

vue.js入门demo，希望能够给初学者一点帮助！为了美观考虑，代码尝试使用了bootstrap布局，适合移动端演示。一、首先创建目录，结构一目了然。二、布局页面样式，简单布局，贴出效果，图省事，直接bootstrap三、接下来便是主要逻辑代码了，vue的简单实用，不啰嗦，直接源码！window.onload = function(){new Vue

Zhany9

6948人浏览 · 2017-01-07 16:12:14

Zhany9 · 2017-01-07 16:12:14 发布

vue.js入门demo，希望能够给初学者一点帮助！

为了美观考虑，代码尝试使用了bootstrap布局，适合移动端演示。

一、首先创建目录，结构一目了然。

二、布局页面样式，简单布局，贴出效果，图省事，直接bootstrap

三、接下来便是主要逻辑代码了，vue的简单实用，不啰嗦，直接源码！

<script>
	window.onload = function(){
		new Vue({
			el: ".container",
			data: {
				username:'',
				age:'',
				nowIndex: -100,
				myData: [
					
				]
			},
			methods: {
				add: function(){
					this.myData.push({
						name: this.username,
						age: this.age
					});

					this.username = '';
					this.age = '';
				},
				deleteMsg: function(n){
					if(n==-1){
						this.myData = [];
					}else{
						this.myData.splice(n,1);
					}
				}
			}
		})
	}
</script>

四、最后添加了一个弹出的模态框

<!-- 模态框 弹出框 -->
<div role="dialog" class="modal fade" id="layer">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal">
					<span>×</span>
				</button>
				<h4 class="modal-title">确认删除吗？</h4>
			</div>
			<div class="modal-body text-right">
				<button class="btn btn-primary btn-sm" data-dismiss="modal">取消</button>
				<button class="btn btn-danger btn-sm" data-dismiss="modal" v-on:click="deleteMsg(nowIndex)">确认</button>
			</div>
		</div>
	</div>
</div>

效果如下：

本实例为vue.js入门demo，仅供大家学习参考。

源码地址：http://git.oschina.net/Mrzhangy/todolist

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^