本文介绍了一个使用Vue.js实现的基本表单实例，演示了如何利用v-model进行双向数据绑定、v-show控制元素显示隐藏、v-for进行列表渲染及自定义过滤器等特性。通过这个例子，读者可以快速上手Vue.js的表单处理。
目录
1.用v-model来绑定表单中的各个内容，修改内容后会实时的反映到下面的博客总览中，比如：
总体来说实例比较简单，但是基本涵盖了表单常用的一些操作，欢迎交流！！
做了一个表单添加的实例，非常适合入门
没有花时间去做样式，所以不太好看，效果是这样的:
1.用v-model来绑定表单中的各个内容，修改内容后会实时的反映到下面的博客总览中，比如：
博客标题：<input type="text" v-model="blog.title" class='input'>
作者： <select v-model="blog.author">
<option v-for="author in authors" :value="author" >{{author}}</option>
</select>
2.用v-show来控制是否提交，用来控制显示不同的内容：
<div v-show="!submitFlag">
3.v-for列表展示
<li v-for="category in blog.categories">{{category}}</li>
4.性别用了过滤器 filter
<p>性别：{{blog.sex | sex}}</p>
5.属性绑定 (控制按钮是否可用：disabled）
<button @click.prevent="submit" :disabled="blog.title=='' || blog.content=='' || submitFlag">提交</button>
<button @click.prevent="reset" :disabled="(blog.title=='' && blog.content=='')|| submitFlag">重置</button>
完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="GBK">
<title></title>
<style>
* {
margin: 0px;
padding: 0px;
}
body {
margin: 20px;
font-family: Arial, "宋体";
font-size: 12px;
line-height: 20px;
color: #333333;
}
.table {
font-size: 13px;
word-break: break-all;
cursor: default;
BORDER: #FFFFFF 1px solid;
background-color: #FFFFFF;
border-collapse: collapse;
border-Color: #E2B801;
width:80%
}
.tdprimary{
padding: 5px;
width: 400px;
}
.title{
padding-left:40%;
color:green;
}
.input{
float: left;
width: 80%;
padding: 1px 0;
align:center;
}
.succ{
width: 100%;
height:160px;
}
</style>
</head>
<body>
<div id="app">
<div>
<h1 class="title">添加博客</h1>
<h1 v-show="submitFlag" class='succ'>博客提交成功</h1>
<div v-show="!submitFlag">
<table border="1" cellspacing="1" cellpadding="4"
bordercolorlight=#CCCCCC bordercolordark=#FFFFFF class="table">
<tr>
<td align="right">博客标题：</td>
<td class='tdprimary'><input type="text" v-model="blog.title" class='input'></td>
<td align="right">分类：</td>
<td class='tdprimary'>
<input type="checkbox" value="vue.js" v-model="blog.categories">vue.js
<input type="checkbox" value="node.js" v-model="blog.categories">node.js
<input type="checkbox" value="react.js" v-model="blog.categories">react.js
<input type="checkbox" value="jquery.js" v-model="blog.categories">jquery.js
</td>
</tr>
<tr>
<td align="right">博客内容：</td>
<td colspan=3 class='tdprimary'><textarea v-model="blog.content" cols="102" rows=5></textarea></td>
</tr>
<tr>
<td align="right">作者：</td>
<td class='tdprimary'>
<select v-model="blog.author">
<option v-for="author in authors" :value="author" >{{author}}</option>
</select>
</td>
<td align="right">性别：</td>
<td class='tdprimary'>
<input name="sex" type="radio" value="1" v-model="blog.sex">男
<input name="sex" type="radio" value="0" v-model="blog.sex">女
</td>
</tr>
</table>
</div>
<hr>
<div>
<h3>博客总览</h3>
<p>博客标题：{{blog.title}}</p>
<p>博客内容：{{blog.content}}</p>
<p>博客分类：{{blog.categories}}</p>
<ul>
<li v-for="category in blog.categories">{{category}}</li>
</ul>
<p>作者：{{blog.author}}</p>
<p>性别：{{blog.sex | sex}}</p>
</div>
<button @click.prevent="submit" :disabled="blog.title=='' || blog.content=='' || submitFlag">提交</button>
<button @click.prevent="reset" :disabled="(blog.title=='' && blog.content=='')|| submitFlag">重置</button>
</div>
</div>
</body>
<script src="vue.js"></script>
<script>
var vue=new Vue({
el:'#app',
data:{
submitFlag:false,
blog:{title:'',content:'',categories:[],author:'',sex:'0'},
authors:['tom','bob','jerry'],
message:"hello world12"
},
filters:{
sex:function(data){
var sex='女';
if(data==='1'){
sex='男';
}
return sex;
}
},
mounted:function(){
this.blog.author='bob';
},
methods:{
submit:function(){
console.log(this.blog);
this.submitFlag=true;
},
reset:function(){
this.blog.title='';
this.blog.content='';
this.blog.categories=[];
this.blog.author='bob';
this.blog.sex='0';
this.submitFlag=false;
}
},
computed:{
}
})
</script>
</html>
总体来说实例比较简单，但是基本涵盖了表单常用的一些操作，欢迎交流！！
扫一扫
1805
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
