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 相关文章推荐
textContent在Firefox下与innerText等效的属性
May 12 Javascript
jQuery动态添加的元素绑定事件处理函数代码
Aug 02 Javascript
在javascript中执行任意html代码的方法示例解读
Dec 25 Javascript
倒记时60刷新网页的js代码
Feb 18 Javascript
jquery获取checkbox的值并post提交
Jan 14 Javascript
window.onload与$(document).ready()的区别分析
May 30 Javascript
JavaScript学习笔记之数组去重
Mar 23 Javascript
微信小程序下拉刷新PullDownRefresh的使用方法
Nov 29 Javascript
vue使用Proxy实现双向绑定的方法示例
Mar 20 Javascript
layui的数据表格+springmvc实现搜索功能的例子
Sep 28 Javascript
JavaScript Tab菜单实现过程解析
May 13 Javascript
Vue.js中Line第三方登录api的实现代码
Jun 29 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分页类代码
2013/04/02 PHP
解析linux下安装memcacheq(mcq)全过程笔记
2013/06/27 PHP
PHP 快速排序算法详解
2014/11/10 PHP
php写入数据到CSV文件的方法
2015/03/14 PHP
详解PHP的Yii框架的运行机制及其路由功能
2016/03/17 PHP
golang与php实现计算两个经纬度之间距离的方法
2016/07/22 PHP
php反序列化长度变化尾部字符串逃逸(0CTF-2016-piapiapia)
2020/02/15 PHP
javascript比较文档位置
2008/04/08 Javascript
基于jquery的商品展示放大镜
2010/08/07 Javascript
js三种排序算法分享
2012/08/16 Javascript
jquery.cookie() 方法的使用(读取、写入、删除)
2013/12/05 Javascript
一个JS函数搞定网页标题(title)闪动效果
2014/05/13 Javascript
JavaScript实现页面跳转的几种常用方式
2015/11/28 Javascript
js获取元素的外链样式的简单实现方法
2016/06/06 Javascript
Bootstrap实现圆角、圆形头像和响应式图片
2016/12/14 Javascript
jquery点击回车键实现登录效果并默认焦点的方法
2018/03/09 jQuery
微信公众平台获取access_token的方法步骤
2019/03/29 Javascript
vue prop属性传值与传引用示例
2019/11/13 Javascript
HTML+JS实现“代码雨”效果源码(黑客帝国文字下落效果)
2020/03/17 Javascript
vue项目在线上服务器访问失败原因分析
2020/08/14 Javascript
[03:07]2015国际邀请赛选手档案EHOME.rOtK 是什么让他落泪?
2015/07/31 DOTA
python操作MySQL数据库的方法分享
2012/05/29 Python
python fabric实现远程操作和部署示例
2014/03/25 Python
Python程序中的观察者模式结构编写示例
2016/05/27 Python
Python实现合并同一个文件夹下所有txt文件的方法示例
2018/04/26 Python
Centos部署django服务nginx+uwsgi的方法
2019/01/02 Python
python登录WeChat 实现自动回复实例详解
2019/05/28 Python
python3获取文件中url内容并下载代码实例
2019/12/27 Python
详解tensorflow之过拟合问题实战
2020/11/01 Python
总结30个CSS3选择器
2017/04/13 HTML / CSS
单位在职证明范本
2014/01/09 职场文书
2014学雷锋活动心得体会
2014/03/10 职场文书
给校长的建议书100字
2014/05/16 职场文书
个人委托书怎么写
2014/09/17 职场文书
教师法制教育培训学习心得体会
2016/01/14 职场文书
NoSQL优缺点与MongoDB数据库简介
2022/06/05 MongoDB