添加博客

< template >
< div class=“add-blog” >
< h2 >添加博客< /h2 >
< form v-if="!summitt" >

< label >博客标题< /label >
< input type=“text” v-model=“blog.title” placeholder=“标题” required/ >
< b r >

< label >博客内容< /label >
< br >
< textarea v-model=“blog.content” >< /textarea >
< br >

< div id=“checkboxes” >
< input type=“checkbox” id=“c++” value=“c++” v-model=“blog.checkName” >
< label for=“c++”>c++< /label >
< input type=“checkbox” id=“java” value=“java” v-model=“blog.checkName” >
< label for=“java” >java< /label >
< input type=“checkbox” id=“python” value=“python” v-model=“blog.checkName” >
< label for=“python” >python< /label >
< input type=“checkbox” id=“php” value=“php” v-model=“blog.checkName”>
< label for=“php”>php< /label>
< /div>

< div id=“author”>
< label>作者< /label>
< select v-model=“blog.author”>
< option disabled value="">请选择作者< /option>
< option v-for=“i in authors”>{{i}}< /option>
< /select>
< /div>
< button v-on:click.prevent=“addblog”>添加博客< /button> < !-- .prevent:事件修饰符 事件不再重载（刷新)页面 vue介绍–>
< /form>

< div v-if=“summitt”>
< h3>添加成功
< /div>
< /div>
< /template>

< !–需要用到http中get、post请求 用到vue给的请求 安装resource–>
< !–post成功之后返回的内容 .then–>

< script>
export default {
name: ‘add-blog’,
data(){
return{
blog:{
title:"",
content:"",
checkName:[],
author:""
},
authors:[“A”,“B”,“C”],
summitt:false,
}
},
methods:{
addblog:function(){
this.$http.post(“http://jsonplaceholder.typicode.com/posts”,{
title:this.blog.title,
body:this.blog.content,
userId:1
})
.then(function(data){
console.log(data);
this.summitt=true;
});
}
}
}
< /script>

< style scoped>
#add-blog * {
margin:20px auto;
}
#add-blog{
display:block;
width:100%;
max-width:100px;
padding:20px 0 10px;
}
label{
display:block;
margin:20px 0 10px;
}
input[type=“text”],textarea,select{
display:block;
width:90%;
padding:10px;
}
textarea{
height:200px;
}
#checkboxes input{
display:inline-block;
margin-top:0;
}
#checkboxes label{
display:inline-block;
margin-top:0;
margin-right:10px;
}
#author{
width:100%;
}
button{
display:block;
margin:20px 0;
background:red;
color:#fff;
border:0;
padding:15px;
boder-radius:10px;
cursor:pointer;
}
h3{
margin-top:10px;
}
< /style>