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 相关文章推荐
js 页面关闭前的出现提示的实现代码
May 25 Javascript
javascript中直接写php代码的方法
Jul 31 Javascript
jQuery实现视频作为全屏幕背景
Dec 18 Javascript
jquery实现模拟百分比进度条渐变效果代码
Oct 29 Javascript
详解堆的javascript实现方法
Nov 29 Javascript
angular2倒计时组件使用详解
Jan 12 Javascript
JavaScript实现简单精致的图片左右无缝滚动效果
Mar 16 Javascript
Axios学习笔记之使用方法教程
Jul 21 Javascript
浅析Vue 和微信小程序的区别、比较
Aug 03 Javascript
在vue中使用vue-echarts-v3的实例代码
Sep 13 Javascript
webpack 处理CSS资源的实现
Sep 27 Javascript
介绍一下28个JS常用数组方法
May 06 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 类型转换函数intval
2009/06/20 PHP
php设计模式 State (状态模式)
2011/06/26 PHP
php中禁止单个IP与ip段访问的代码小结
2012/07/04 PHP
利用php获取服务器时间的实现代码
2013/06/07 PHP
PHP环境搭建的详细步骤
2016/06/30 PHP
php之header的不同用法总结(实例讲解)
2017/11/28 PHP
jquery 简单图片导航插件jquery.imgNav.js
2010/03/17 Javascript
浅谈Javascript嵌套函数及闭包
2010/11/09 Javascript
js操纵dom生成下拉列表框的方法
2014/02/24 Javascript
JavaScript中constructor()方法的使用简介
2015/06/05 Javascript
值得学习的bootstrap fileinput文件上传工具
2016/11/08 Javascript
浅谈js script标签中的预解析
2016/12/30 Javascript
AngularJS中的缓存使用
2017/01/11 Javascript
JS基于面向对象实现的多个倒计时器功能示例
2017/02/28 Javascript
深入nodejs中流(stream)的理解
2017/03/27 NodeJs
React-router中结合webpack实现按需加载实例
2017/05/25 Javascript
javascript简写常用的12个技巧(可以大大减少你的js代码量)
2020/03/28 Javascript
vue综合组件间的通信详解
2017/11/06 Javascript
Vuex的各个模块封装的实现
2020/06/05 Javascript
[34:08]2018DOTA2亚洲邀请赛3月29日 小组赛B组 VP VS EG
2018/03/30 DOTA
python 调用c语言函数的方法
2017/09/29 Python
python numpy 一维数组转变为多维数组的实例
2018/07/02 Python
Python Matplotlib 基于networkx画关系网络图
2019/07/10 Python
python 使用while写猜年龄小游戏过程解析
2019/10/07 Python
解决python3.6用cx_Oracle库连接Oracle的问题
2020/12/07 Python
Sneaker Studio波兰:购买运动鞋
2018/04/28 全球购物
回馈慈善的设计师太阳镜:DIFF eyewear
2019/10/17 全球购物
RealTek面试题
2016/06/28 面试题
AJAX的优缺点都有什么
2015/08/18 面试题
介绍一下SOA和SOA的基本特征
2016/02/24 面试题
机电专业个人求职信范文
2013/12/30 职场文书
语文教学感言
2014/02/06 职场文书
学校学期工作总结
2015/08/13 职场文书
VUE使用draggable实现组件拖拽
2022/04/06 Vue.js
德生BCL3000抢先使用感受和评价
2022/04/07 无线电
Python中的matplotlib绘制百分比堆叠柱状图,并为每一个类别设置不同的填充图案
2022/04/20 Python