vue添加博客功能、展示博客详情，主要用到表单、双向绑定、v-show、v-for、过滤器filter等

ゝ一纸荒年。 2021-07-24 16:42 162阅读 0赞

**目录**

做了一个表单添加的实例，非常适合入门

没有花时间去做样式，所以不太好看，效果是这样的:

1.用v-model来绑定表单中的各个内容，修改内容后会实时的反映到下面的博客总览中，比如：

2.用v-show来控制是否提交，用来控制显示不同的内容：

3.v-for列表展示

4.性别用了过滤器 filter

5.属性绑定 (控制按钮是否可用：disabled）

完整代码：

总体来说实例比较简单，但是基本涵盖了表单常用的一些操作，欢迎交流！！

--------------------

# 做了一个表单添加的实例，非常适合入门 #

# 没有花时间去做样式，所以不太好看，效果是这样的: #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70][]

## 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来控制是否提交，用来控制显示不同的内容： ##

## 3.v-for列表展示 ##

<li v-for="category in blog.categories">\{ \{category\}\}</li>

## 4.性别用了过滤器 filter ##

## 5.属性绑定 (控制按钮是否可用：disabled） ##

# 完整代码： #

<!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>

# 总体来说实例比较简单，但是基本涵盖了表单常用的一些操作，欢迎交流！！ #

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70]: /images/20210724/208c74fde84e48a6a00335dd3829c6ae.png