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


Posted in Javascript onSeptember 27, 2019

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

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

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

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

功能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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery1.4+ Ajax IE8 内存泄漏问题
Oct 15 Javascript
在多个页面使用同一个HTML片段的代码
Mar 04 Javascript
JQuery页面图片切换和新闻列表滚动效果的具体实现
Sep 26 Javascript
jQuery制作可自定义大小的拼图游戏
Mar 30 Javascript
jquery实现图片预加载
Dec 25 Javascript
js实现为a标签添加事件的方法(使用闭包循环)
Aug 02 Javascript
JS产生随机数的用法小结
Dec 10 Javascript
微信小程序Server端环境配置详解(SSL, Nginx HTTPS,TLS 1.2 升级)
Jan 12 Javascript
详解Vue SSR( Vue2 + Koa2 + Webpack4)配置指南
Nov 13 Javascript
Vue实现将数据库中带html标签的内容输出(原始HTML(Raw HTML))
Oct 28 Javascript
使用webpack搭建vue环境的教程详解
Dec 31 Javascript
解决Echarts2竖直datazoom滑动后显示数据不全的问题
Jul 20 Javascript
vue实现文字加密功能
Sep 27 #Javascript
微信小程序 动态修改页面数据及参数传递过程详解
Sep 27 #Javascript
vue实现购物车小案例
Sep 27 #Javascript
解决layui中onchange失效以及form动态渲染失效的问题
Sep 27 #Javascript
layui 地区三级联动 form select 渲染的实例
Sep 27 #Javascript
vue实现移动端省市区选择
Sep 27 #Javascript
vue实现表单录入小案例
Sep 27 #Javascript
You might like
用PHP实现小型站点广告管理(修正版)
2006/10/09 PHP
PHP动态变静态原理
2006/11/25 PHP
用PHP生成静态HTML速度快类库
2007/03/18 PHP
php字符串按照单词进行反转的方法
2015/03/14 PHP
php mailer类调用远程SMTP服务器发送邮件实现方法
2016/03/04 PHP
javascript面向对象编程(一) 实例代码
2010/06/25 Javascript
修改file按钮的默认样式实现代码
2013/04/23 Javascript
一个支付页面DEMO附截图
2014/07/22 Javascript
jQuery的观察者模式详解
2014/12/22 Javascript
jquery实现公告翻滚效果
2015/02/27 Javascript
jquery实现带渐变淡入淡出并向右依次展开的多级菜单效果实例
2015/08/22 Javascript
js实现横向拖拽导航条功能
2017/02/17 Javascript
JavaScript 数据类型详解
2017/03/13 Javascript
基于vue.js快速搭建图书管理平台
2017/10/29 Javascript
Vue组件基础用法详解
2020/02/05 Javascript
vue-router重写push方法,解决相同路径跳转报错问题
2020/08/07 Javascript
Vue自定义表单内容检查rules实例
2020/10/30 Javascript
微信小程序onShareTimeline()实现分享朋友圈
2021/01/07 Javascript
Python批量转换文件编码格式
2015/05/17 Python
python中ASCII码字符与int之间的转换方法
2018/07/09 Python
对Python subprocess.Popen子进程管道阻塞详解
2018/10/29 Python
python 判断矩阵中每行非零个数的方法
2019/01/26 Python
python面试题小结附答案实例代码
2019/04/11 Python
Python分支语句与循环语句应用实例分析
2019/05/07 Python
python使用多线程编写tcp客户端程序
2019/09/02 Python
python 用 xlwings 库 生成图表的操作方法
2019/12/22 Python
windows10在visual studio2019下配置使用openCV4.3.0
2020/07/14 Python
Python中logger日志模块详解
2020/08/04 Python
手把手教你将Flask应用封装成Docker服务的实现
2020/08/19 Python
浅谈HTML5 FileReader分布读取文件以及其方法简介
2017/11/09 HTML / CSS
基于Html5 canvas实现裁剪图片和马赛克功能及又拍云上传图片 功能
2019/07/09 HTML / CSS
大学生专科学习生活的自我评价
2013/12/07 职场文书
探矿工程师自荐信
2014/01/24 职场文书
计划生育标语
2014/06/23 职场文书
学习nginx基础知识
2021/09/04 Servers
MySQL 数据类型详情
2021/11/11 MySQL