提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

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

Vue博客 功能 for 添加 绑定 表单 展示
2023-09-11 14:21:46 时间

目录

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

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

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

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

3.v-for列表展示

4.性别用了过滤器 filter

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

完整代码：

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

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

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

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>

 

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

 

相关文章