vue监听用户输入和点击功能
更新时间：2019年09月27日 12:00:43 作者：小羽向前跑
这篇文章主要为大家详细介绍了vue监听用户输入和点击功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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);
})
}
}
功能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 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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章
这篇文章主要给大家介绍了关于vue3获取、设置元素高度的相关资料,小编通过实际案例向大家展示操作过程,操作方法简单易懂,需要的朋友可以参考下2024-08-08
这篇文章主要为大家详细介绍了Vuex实现简单购物车，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-01-01
今天小编就为大家分享一篇对vux点击事件的优化详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
这篇文章主要介绍了vue中v-for通过动态绑定class实现触发效果,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2018-12-12
解决vue-photo-preview 异步图片放大失效的问题
这篇文章主要介绍了解决vue-photo-preview 异步图片放大失效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
这篇文章主要为大家详细介绍了Vue3如何结合Vite4对项目进行性能优化的相关配置,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2025-04-04
解决Can''t find variable: SockJS vue项目的问题
这篇文章主要介绍了解决Can't find variable: SockJS vue项目的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
这篇文章主要介绍了一篇文章带你彻底搞懂VUE响应式原理，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可任意参考一下,需要的朋友可以参考下2022-06-06
本篇文章主要介绍了深入理解vue-router之keep-alive。keep-alive使被包含的组件保留状态，或避免重新渲染，有兴趣的可以了解一下2017-08-08
这篇文章主要为大家详细介绍了Vue使用video标签实现视频播放，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
最新评论