宜宾网站建设公司

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]，

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

 

  
添加博客

  

  
  
  

  
  
  

   
   
   
   
   
   
   
   
  

  
  
  
  

  

  

  
博客总览

  
博客标题：

  
{{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://ybzwz.com/article/jdjspj.html

其他资讯