本文实例为大家分享了vue监听用户输入和点击的具体代码，供大家参考，具体内容如下
丹阳ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景，ssl证书未来市场广阔！成为成都创新互联公司的ssl证书销售渠道，可以享受市场价格4-6折优惠！如果有意向欢迎电话联系或者加微信：028-86922220（备注：SSL证书合作）期待与您的合作！
功能1：监听用户输入和点击，并实时显示，
功能2：点击发布，编辑页面隐藏，显示发布成功。
功能1 html代码：
使用：v-model监听，!submmited视图默认显示，注意监听option v-for="(i,index) in authors" v-bind:value="authors[index]，
监听当下用户点击的那个；
添加博客
博客总览
博客标题：
{{blog.title}}
博客内容：
{{blog.content}}
博客分类
- {{categories}}
作者：
{{blog.author}}
功能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代码：
您的博客发布成功
功能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所有代码：
添加博客
您的博客发布成功
博客总览
博客标题：
{{blog.title}}
博客内容：
{{blog.content}}
博客分类
- {{categories}}
作者：
{{blog.author}}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持创新互联。