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 相关文章推荐
使用prototype.js进行异步操作
Feb 07 Javascript
一段批量给页面上的控件赋值js
Jun 19 Javascript
jquery模拟SELECT下拉框取值效果
Oct 23 Javascript
jQuery链使用指南
Jan 20 Javascript
JS实现控制表格行内容垂直对齐的方法
Mar 30 Javascript
AngularJS基础 ng-model 指令详解及示例代码
Aug 02 Javascript
JavaScript实现公历转农历功能示例
Feb 13 Javascript
vue.js中指令Directives详解
Mar 20 Javascript
vue中简单弹框dialog的实现方法
Feb 26 Javascript
vue操作下拉选择器获取选择的数据的id方法
Aug 24 Javascript
原生js中运算符及流程控制示例详解
Jan 05 Javascript
CocosCreator入门教程之网络通信
Apr 16 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
MVC模式的PHP实现
2006/10/09 PHP
PHP 抓取网页图片并且另存为的实现代码
2010/03/24 PHP
PHP常用的缓存技术汇总
2014/05/05 PHP
利用laravel搭建一个迷你博客实战教程
2017/08/13 PHP
javascript 常用代码技巧大收集
2009/02/25 Javascript
JS模拟的QQ面板上的多级可展开的菜单
2009/10/10 Javascript
表格 隔行换色升级版
2009/11/07 Javascript
再谈javascript面向对象编程
2012/03/18 Javascript
Area 区域实现post提交数据的js写法
2014/04/22 Javascript
JS实现滑动菜单效果代码(包括Tab,选项卡,横向等效果)
2015/09/24 Javascript
JavaScript多并发问题如何处理
2015/10/28 Javascript
图片旋转、鼠标滚轮缩放、镜像、切换图片js代码
2020/12/13 Javascript
使用BootStrap实现悬浮窗口的效果
2016/12/13 Javascript
浅析jsopn跨域请求原理及cors(跨域资源共享)的完美解决方法
2017/02/06 Javascript
关于react-router的几种配置方式详解
2017/07/24 Javascript
原生JS实现图片懒加载之页面性能优化
2019/04/26 Javascript
浅析webpack-bundle-analyzer在vue-cli3中的使用
2019/10/23 Javascript
AngularJS动态生成select下拉框的方法实例
2019/11/17 Javascript
[40:10]2015国际邀请赛全明星表演赛
2015/08/07 DOTA
Python学习笔记(二)基础语法
2014/06/06 Python
Python脚本获取操作系统版本信息
2016/12/17 Python
Python 自动刷博客浏览量实例代码
2017/06/14 Python
获取Django项目的全部url方法详解
2017/10/26 Python
人机交互程序 python实现人机对话
2017/11/14 Python
将string类型的数据类型转换为spark rdd时报错的解决方法
2019/02/18 Python
在python里协程使用同步锁Lock的实例
2019/02/19 Python
Tensorflow中tf.ConfigProto()的用法详解
2020/02/06 Python
python3+opencv生成不规则黑白mask实例
2020/02/19 Python
Python图像处理库PIL的ImageFont模块使用介绍
2020/02/26 Python
Python动态强类型解释型语言原理解析
2020/03/25 Python
Html5无刷新修改browser Url的方法
2014/01/15 HTML / CSS
世界上最大的街头服饰网站:Karmaloop
2017/02/04 全球购物
校园活动策划方案
2014/06/13 职场文书
保险公司开门红口号
2014/06/21 职场文书
女性健康讲座主持词
2015/07/04 职场文书
小学科学课教学反思
2016/02/23 职场文书