methods : {
// 添加选项
add : function(){
this.username.push(''); // 新添加的输入框为空
},
// 删除当前选项
del : function(e){
var index = e.target.getAttribute('index'); // 获取所在位置然后删除
this.username.splice(index, 1);
}
}
})
再来看下效果:[demo2]
2. 上传图片
刚开始时,使用的jQuery的插件fileupload,功能很全,当我为file标签绑定上change事件后,然后再调用该插件进行图片上传,总是会出现意想不到的bug,比如我先对图片格式进行限制,只能上传png格式的图片,可是有时候jpg格式的也能上传上去;png格式的图片,英文名称无法上传,先传个中文名称,然后就可以再上传英文呢名称的了。
后来发现html5下的formData属性,能非常方便的上传图片,而且同时还能上传其他的参数,一小段代码即可搞定:
// 上传图片,绑定change事件
uppic : function(e){
var file = e.target.files[0]; // 每次只允许上传一张图片,因此只取[0] // 判断图片格式
if( file.type!='image/png' ){
alert('图片格式不正确');
e.target.files.length = 0;
$(e.target).val('');
return false;
}
// 使用formData组装数据
var formData = new FormData();
formData.append('pic', $(e.target)[0].files[0]); // 文件数据
formData.append('flag', '1'); // 其他的一些参数
$.ajax({// ajax上传
url: 'xxxxx.php',
type: 'POST',
cache: false,
data: formData,
processData: false,
contentType: false
}).done(function(result) {
console.log('上传完成');
});
}
3. 总结
现在也是刚开始学习vue,代码肯定比较烂,最重要的还是转变思维吧!










