叶子小小的，碧绿碧绿的，花儿小小的，好可爱。紫红色的玫瑰花在风中翩翩起舞，玫瑰花树枝上还有调皮又可爱的小刺，你可要当心哦！你看，那个大仙人球旁围着8个小仙人球，好像一家人聚在一起，多欢快呀！
本文实例为大家分享了vue监听用户输入和点击的具体代码，供大家参考，具体内容如下
功能1：监听用户输入和点击，并实时显示，
功能2：点击发布，编辑页面隐藏，显示发布成功。
功能1 html代码：
使用：v-model监听，!submmited视图默认显示，注意监听option v-for="(i,index) in authors" v-bind:value="authors[index]，
监听当下用户点击的那个；
<div id="add-blog">
<h2>添加博客</h2>
<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">
<h3>博客总览</h3>
<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);
})
}
}
功能2html代码：
<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 id="add-blog">
<h2>添加博客</h2>
<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">
<h3>您的博客发布成功</h3>
</div>
<hr/>
<div id="preview">
<h3>博客总览</h3>
<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>
以上就是vue监听用户输入和点击功能。不好放下你的。当梦想没有了以后，你还能够生存，但是你虽生犹死。更多关于vue监听用户输入和点击功能请关注haodaima.com其它相关文章！
