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 相关文章推荐
讲两件事:1.this指针的用法小探. 2.ie的attachEvent和firefox的addEventListener在事件处理上的区别
Apr 12 Javascript
javascript div 弹出可拖动窗口
Feb 26 Javascript
js性能优化 如何更快速加载你的JavaScript页面
Mar 17 Javascript
jQuery中after的两种用法实例
Jul 03 Javascript
extjs render 用法介绍
Sep 11 Javascript
js获取当前时间显示在页面上并每秒刷新
Dec 24 Javascript
JS中位置与大小的获取方法
Nov 22 Javascript
80%应聘者都不及格的JS面试题
Mar 21 Javascript
jQuery遍历节点方法汇总(推荐)
May 13 jQuery
彻底理解js面向对象之继承
Feb 04 Javascript
深入Vue-Router路由嵌套理解
Aug 13 Javascript
使用layui 的layedit定义自己的toolbar方法
Sep 18 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
一个简单计数器的源代码
2006/10/09 PHP
完美解决thinkphp验证码出错无法显示的方法
2014/12/09 PHP
php采用session实现防止页面重复刷新
2015/12/24 PHP
PHP-FPM运行状态的实时查看及监控详解
2016/11/18 PHP
javascript提取URL的搜索字符串中的参数(自定义函数实现)
2013/01/22 Javascript
使用jQuery UI的tooltip函数修饰title属性的气泡悬浮框
2013/06/24 Javascript
JavaScript的递归之递归与循环示例介绍
2013/08/05 Javascript
js 跳出页面的frameset框架示例介绍
2013/12/23 Javascript
Jquery easyui开启行编辑模式增删改操作
2016/01/14 Javascript
JavaScript模拟鼠标右键菜单效果
2020/12/08 Javascript
深入理解JavaScript单体内置对象
2016/06/06 Javascript
Ajax+FormData+javascript实现无刷新表单信息提交
2016/10/24 Javascript
利用vue写todolist单页应用
2016/12/15 Javascript
wepy--用vantUI 实现上弹列表并选择相应的值操作
2020/11/03 Javascript
django model去掉unique_together报错的解决方案
2016/10/18 Python
详解numpy.meshgrid()方法使用
2019/08/01 Python
pycharm 批量修改变量名称的方法
2019/08/01 Python
利用Python校准本地时间的方法教程
2019/10/31 Python
创建Shapefile文件并写入数据的例子
2019/11/26 Python
浅谈Python中的异常和JSON读写数据的实现
2020/02/27 Python
TensorFlow2.1.0安装过程中setuptools、wrapt等相关错误指南
2020/04/08 Python
Python绘制全球疫情变化地图的实例代码
2020/04/20 Python
欧舒丹比利时官网:L’OCCITANE比利时
2017/04/25 全球购物
美国羽绒床上用品第一品牌:Pacific Coast
2018/08/25 全球购物
全球在线商店:BerryLook
2019/04/14 全球购物
应聘收银员个人的求职信
2013/11/30 职场文书
大学生职业生涯规划范文——找准自我,定位人生
2014/01/23 职场文书
文员岗位职责范本
2014/03/08 职场文书
新年联欢会主持词
2014/03/27 职场文书
2015年百日安全活动总结
2015/03/26 职场文书
php+laravel 扫码二维码签到功能
2021/05/15 PHP
python正则表达式re.search()的基本使用教程
2021/05/21 Python
Python初识逻辑与if语句及用法大全
2021/08/07 Python
nginx中proxy_pass各种用法详解
2021/11/07 Servers
Python列表的索引与切片
2022/04/07 Python
大型强子对撞机再次重启探索“第五种自然力”
2022/04/29 数码科技