溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例為大家分享了vue監聽用戶輸入和點擊的具體代碼，供大家參考，具體內容如下
功能1：監聽用戶輸入和點擊，并實時顯示，
功能2：點擊發布，編輯頁面隱藏，顯示發布成功。
功能1 html代碼：
使用：v-model監聽，!submmited視圖默認顯示，注意監聽option v-for="(i,index) in authors" v-bind:value="authors[index]，
監聽當下用戶點擊的那個；
<div id="add-blog">
<h3>添加博客</h3>
<form v-if="!submmited">
<label for="" class="">博客標題</label>
<input class="" type="text" v-model="blog.title" required/>
<br/>
<label for="" class="">博客內容</label>
<textarea class="" v-model="blog.content"></textarea>
<div id="checkboxs">
<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 id="preview">
<h4>博客總覽</h4>
<p>博客標題：</p>
<p class="color">{{blog.title}}</p>
<p>博客內容：</p>
<p class="color">{{blog.content}}</p>
<p>博客分類</p>
<ul>
<li v-for="categories in blog.categories" class="color">
{{categories}}
</li>
</ul>
<p>作者：</p>
<p class="color">{{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"> <h4>您的博客發布成功</h4> </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 id="add-blog">
<h3>添加博客</h3>
<form v-if="!submmited">
<label for="" class="">博客標題</label>
<input class="" type="text" v-model="blog.title" required/>
<br/>
<label for="" class="">博客內容</label>
<textarea class="" v-model="blog.content"></textarea>
<div id="checkboxs">
<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">
<h4>您的博客發布成功</h4>
</div>
<hr/>
<div id="preview">
<h4>博客總覽</h4>
<p>博客標題：</p>
<p class="color">{{blog.title}}</p>
<p>博客內容：</p>
<p class="color">{{blog.content}}</p>
<p>博客分類</p>
<ul>
<li v-for="categories in blog.categories" class="color">
{{categories}}
</li>
</ul>
<p>作者：</p>
<p class="color">{{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>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
