vue监听用户输入和点击功能

本文实例为大家分享了vue监听用户输入和点击的具体代码，供大家参考，具体内容如下

丹阳ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景，ssl证书未来市场广阔！成为成都创新互联公司的ssl证书销售渠道，可以享受市场价格4-6折优惠！如果有意向欢迎电话联系或者加微信：028-86922220（备注：SSL证书合作）期待与您的合作！

功能1：监听用户输入和点击，并实时显示，

功能2：点击发布，编辑页面隐藏，显示发布成功。

vue监听用户输入和点击功能

功能1 html代码：

使用：v-model监听，!submmited视图默认显示，注意监听option v-for="(i,index) in authors" v-bind:value="authors[index]，

监听当下用户点击的那个；

 
  添加博客
  
  博客标题
  
  

  博客内容
  
  
   Vue.js
   
   react.js
   
   javasript
   
   css
   
  
  作者：
  
  
  
  
  
  博客总览
  博客标题：
  {{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所有代码：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持创新互联。

新闻名称：vue监听用户输入和点击功能
网页路径：http://6mz.cn/article/jdjspj.html

网站建设知识

vue监听用户输入和点击功能

添加博客

博客总览

您的博客发布成功

添加博客

您的博客发布成功

博客总览

其他资讯