功能1 html代码：
使用：v-model监听，!submmited视图默认显示，注意监听option v-for="(i,index) in authors" v-bind:value="authors[index]，
监听当下用户点击的那个；
<div> <h2>添加博客</h2> <form v-if="!submmited"> <label for="">博客标题</label> <input type="text" v-model="blog.title" required/> <br/> <label for="">博客内容</label> <textarea v-model="blog.content"></textarea> <div> <label for="">Vue.js</label> <input type="checkbox" value="vue.js" v-model="blog.categories"/> <label for="">react.js</label> <input type="checkbox" value="react.js" v-model="blog.categories"/> <label for="">javasript</label> <input type="checkbox" value="javasript.js" v-model="blog.categories"/> <label for="">css</label> <input type="checkbox" value="css" v-model="blog.categories"/> </div> <label for="">作者：</label> <select v-model="blog.author"> <option v-for="(i,index) in authors" v-bind:value="authors[index]"> {{i}} </option> </select> <button v-on:click.prevent="post">添加博客</button> </form> <hr/> <div> <h3>博客总览</h3> <p>博客标题：</p> <p>{{blog.title}}</p> <p>博客内容：</p> <p>{{blog.content}}</p> <p>博客分类</p> <ul> <li v-for="categories in blog.categories"> {{categories}} </li> </ul> <p>作者：</p> <p>{{blog.author}}</p> </div> </div>
功能1 js代码：
data(){ return{ blog:{ title:"", content:"", categories:[], author:"" }, authors:[ "张三","李四","王五" ], submmited:false } }, methods:{ post:function () { this.$http.post("https://jsonplaceholder.typicode.com/posts/"{ title:this.blog.title, body:this.blog.content, }) .then(function (data) { //console.log(data); }) } }
功能2 html代码：
<div v-if="submmited"> <h3>您的博客发布成功</h3> </div>
功能2 js代码
this.submmited=true 让 “您的博客发布成功” 显示
methods:{ post:function () { this.$http.post("https://jsonplaceholder.typicode.com/posts/"{ title:this.blog.title, body:this.blog.content, }) .then(function (data) { //console.log(data); this.submmited=true }) } }
addblog.vue所有代码：
<template> <div> <h2>添加博客</h2> <form v-if="!submmited"> <label for="">博客标题</label> <input type="text" v-model="blog.title" required/> <br/> <label for="">博客内容</label> <textarea v-model="blog.content"></textarea> <div> <label for="">Vue.js</label> <input type="checkbox" value="vue.js" v-model="blog.categories"/> <label for="">react.js</label> <input type="checkbox" value="react.js" v-model="blog.categories"/> <label for="">javasript</label> <input type="checkbox" value="javasript.js" v-model="blog.categories"/> <label for="">css</label> <input type="checkbox" value="css" v-model="blog.categories"/> </div> <label for="">作者：</label> <select v-model="blog.author"> <option v-for="(i,index) in authors" v-bind:value="authors[index]"> {{i}} </option> </select> <button v-on:click.prevent="post">添加博客</button> </form> <div v-if="submmited"> <h3>您的博客发布成功</h3> </div> <hr/> <div> <h3>博客总览</h3> <p>博客标题：</p> <p>{{blog.title}}</p> <p>博客内容：</p> <p>{{blog.content}}</p> <p>博客分类</p> <ul> <li v-for="categories in blog.categories"> {{categories}} </li> </ul> <p>作者：</p> <p>{{blog.author}}</p> </div> </div> </template> <script> export default { name: "addblog", data(){ return{ blog:{ title:"", content:"", categories:[], author:"" }, authors:[ "张三","李四","王五" ], submmited:false } }, methods:{ post:function () { this.$http.post("https://jsonplaceholder.typicode.com/posts/",this.blog) .then(function (data) { console.log(data); this.submmited=true }) } } } </script> <style scoped> #add-blog *{ box-sizing: border-box; } #add-blog{ margin: 20px auto; max-width: 600px; padding:20px; } label{ display: block; margin:20px 0 10px; } input[type="text"],textarea,select{ display: block; width: 100%; padding: 8px; } textarea{ height: 200px; } #checkboxs label{ display: inline-block; margin-top: 0; } #checkboxs input{ display: inline-block; margin-right: 10px; } button{ display: block; margin:20px 0; background: crimson; border:0; padding:14px; border-radius: 4px; font-size: 18px; cursor: pointer; color: white; } #preview{ padding:10px 20px; border: 1px dotted #ccc; margin:30px 0; } .color{ color: blue; } </style>