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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章
详解VUE-地区选择器(V-Distpicker)组件使用心得
这篇文章主要介绍了详解VUE-地区选择器(V-Distpicker)组件使用心得，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-05
本文主要介绍了vue el-pagination分页查询封装的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-06-06
elementUI checkBox报错Cannot read property &ap
这篇文章主要为大家介绍了elementUI checkBox报错Cannot read property 'length' of undefined的解决分析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-06-06
随着前端的快速发展，非常多的js框架被应用到项目中。Vue.js本身支持对组件的异步加载,配合Webpack的分块打包功能,可以极其轻松地实现组件的异步按需加载。 这篇文章是webpack+vue.j的入门教程，有需要的可以参考借鉴。2016-10-10
下面小编就为大家分享一篇解决vue页面DOM操作不生效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
这篇文章主要介绍了vue 登录滑动验证实现代码,代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-08-08
这篇文章主要介绍了Vue动态加载ECharts图表数据的方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-07-07
解决ant Design中Select设置initialValue时的大坑
这篇文章主要介绍了解决ant Design中Select设置initialValue时的大坑，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
本文主要介绍了Vue.js中el-table表格自定义列控制与拖拽，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-05-05
这篇文章主要介绍了vue 通过base64实现图片下载功能，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下2020-12-12
最新评论