Vue.js实现输入框绑定的实例代码


Posted in Javascript onAugust 24, 2017

实现效果如下:

Vue.js实现输入框绑定的实例代码

实现代码及注释

<!DOCTYPE html>
<html>
<head>
  <title>vue.js数据动态编辑</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style type="text/css">
    /* 在Vue实例没有准备好之前隐藏没有编译的mustache */
    [v-cloak]{
      display: none;
    }
    *{
      padding: 0;
      margin: 0;
    }
    body{
      font: 15px/1.3 'Open Sans', sans-serif;
      color: #5e5b64;
      text-align: center;
    }
    a, a:visited{
      outline: none;
      color: #389dc1;
    }
    a:hover{
      text-decoration: none;
    }
    section,footer,header,aside,nav{
      display: block;
    }
    /* tooltip style */
    .tooltip{
      background-color: #03c03c;
      background-image: -webkit-linear-gradient(top, #03c03c, gray);
      background-image: -moz-linear-gradient(top,#03c03c, gray);
      background-image: linear-gradient(top, #03c03c, gray);
      box-shadow: 0 1px 1px #ccc;
      border-radius: 3px;
      width: 290px;
      padding: 10px;
      position: absolute;
      left: 50%;
      margin-left: -150px;
      top: 50px;
    }
    /* 小三角形 */
    .tooltip:after{
      content: "";
      position: absolute;
      border: 6px solid #03c03c;
      border-color: #03c03c transparent transparent;
      width: 0;
      height: 0;
      bottom: -12px;
      left: 50%;
      margin-left: -6px;
    }
    .tooltip input{
      border: none;
      width: 100%;
      line-height: 34px;
      border-radius: 3px;
      box-shadow: 0 2px 6px #bbb inset;
      text-align: center;
      font-size: 16px;
      font-family: inherit;
      color: #8d9395;
      font-weight: bold;
      outline: none;
    }
    p{
      font-size: 22px;
      font-weight: bold;
      color: #6d8088;
      height: 30px;
      cursor: pointer;
    }
    p b{
      color: #fff;
      display: inline-block;
      padding: 5px 10px;
      background-color: #c4d7e0;
      border-radius: 2px;
      text-transform: uppercase;
      font-size: 18px;
    }
    p:before{
      content:"✎";
      display: inline-block;
      margin-right: 5px;
      font-weight: normal;
      vertical-align: text-bottom;
    }
    #main{
      height: 300px;
      position: relative;
      padding-top: 150px;
    }
  </style>
</head>
<body>
<!-- 在Vue实例准备好之前,v-vloak会隐藏任何没有编译的绑定数据 -->
<!-- 当元素被点击后,hideTooltp()方法将被调用 -->
<div id="main" v-cloak v-on:click="hideTooltip">
  <!-- 这是一个tooltip。
    v-on:clock.stop是一个关联点击事件的句柄,用于停止事件。
    v-if保证只有在showtooltip变量为真时才显示tooltip-->
  <div class="tooltip" v-on:click.stop v-if="show_tooltip">
    <!-- v-model绑定text_content模型的文本内容,对于任何文本编辑框的变化都会被自动更新 -->
    <input type="text" name="" v-model="text_content">
  </div>
  <!-- 当p区域被点击后,会调用toggleTooltip方法,阻止事件扩散 -->
  <!-- mustache表达式将会替换text_content的值,它将会自动更新变量值的所有变化 -->
  <p v-on:click.stop="toggleTooltip">{{text_content}}</p>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.5/vue.min.js"></script>
<script type="text/javascript">
  // 创建一个Vue实例,并且传递一个可选对象
  var demo = new Vue({
    // 一个DOM元素表示view model
    el: '#main',
    // 定义属性值,给出初始值
    data: {
      show_tooltip :false,
      text_content: '点击这里进行编辑'
    },
    // 需要使用到的函数
    methods: {
      hideTooltip: function(){
        // 当model被修改,view将被自动更新
        this.show_tooltip = false;
      },
      toggleTooltip: function(){
        this.show_tooltip = !this.show_tooltip;
      }
    }
  })
</script>
</body>
</html>

总结

以上所述是小编给大家介绍的Vue.js实现输入框绑定的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Javascript 判断 object 的特定类转载
Feb 01 Javascript
jquery中使用$(#form).submit()重写提交表单无效原因分析及解决
Mar 25 Javascript
Jquery 返回json数据在IE浏览器中提示下载的问题
May 18 Javascript
JSONP跨域GET请求解决Ajax跨域访问问题
Dec 31 Javascript
js实现右下角提示框的方法
Feb 03 Javascript
React组件之间的通信的实例代码
Jun 27 Javascript
JavaScript中各数制转换全面总结
Aug 21 Javascript
vue axios 在页面切换时中断请求方法 ajax
Mar 05 Javascript
Bootstrap Table实现定时刷新数据的方法
Aug 13 Javascript
vue单页应用在页面刷新时保留状态数据的方法
Sep 21 Javascript
详解webpack的clean-webpack-plugin插件报错
Oct 16 Javascript
Vue实现图书管理案例
Jan 20 Vue.js
Vue.js实现价格计算器功能
Mar 30 #Javascript
js微信分享实现代码
Oct 11 #Javascript
Vue.js实现实例搜索应用功能详细代码
Aug 24 #Javascript
实例详解JSON取值(key是中文或者数字)方式
Aug 24 #Javascript
JSON创建键值对(key是中文或者数字)方式详解
Aug 24 #Javascript
使用jquery+iframe做一个ajax上传效果(实例)
Aug 24 #jQuery
webpack学习笔记之优化缓存、合并、懒加载
Aug 24 #Javascript
You might like
ADODB结合SMARTY使用~超级强
2006/11/25 PHP
javascript 小型动画组件与实现代码
2010/06/02 PHP
PHP中error_log()函数的使用方法
2015/01/20 PHP
php实现统计网站在线人数的方法
2015/05/12 PHP
PHP脚本自动识别验证码查询汽车违章
2016/12/20 PHP
php 将json格式数据转换成数组的方法
2018/08/21 PHP
php根据地址获取百度地图经纬度的实例方法
2019/09/03 PHP
兼容Mozilla必须知道的知识。
2007/01/09 Javascript
jQuery 事件队列调整方法
2009/09/18 Javascript
JS获取url链接字符串 location.href
2013/12/23 Javascript
解决JavaScript数字精度丢失问题的方法
2015/12/03 Javascript
jQuery插件easyUI实现通过JS显示Dialog的方法
2016/09/16 Javascript
JavaScript职责链模式概述
2016/09/17 Javascript
深入学习Bootstrap表单
2016/12/13 Javascript
vue通过滚动行为实现从列表到详情,返回列表原位置的方法
2018/08/31 Javascript
CentOS7中源码编译安装NodeJS的完整步骤
2018/10/13 NodeJs
利用Electron简单撸一个Markdown编辑器的方法
2019/06/10 Javascript
react-router-dom 嵌套路由的实现
2020/05/02 Javascript
Python聚类算法之凝聚层次聚类实例分析
2015/11/20 Python
Python编程实现控制cmd命令行显示颜色的方法示例
2017/08/14 Python
分享一个简单的python读写文件脚本
2017/11/25 Python
磁盘垃圾文件清理器python代码实现
2020/08/24 Python
python opencv 图像尺寸变换方法
2018/04/02 Python
python中rb含义理解
2020/06/18 Python
关于canvas.toDataURL 在iOS运行失败的问题解决
2020/09/16 HTML / CSS
马来西亚最大的在线隐形眼镜商店:MrLens
2019/03/27 全球购物
澳大利亚在线批发商:Simply Wholesale
2021/02/24 全球购物
索桥的故事教学反思
2014/02/06 职场文书
报关专员求职信范文
2014/02/22 职场文书
年度考核自我鉴定
2014/03/19 职场文书
省级青年文明号申报材料
2014/05/23 职场文书
布达拉宫的导游词
2015/02/02 职场文书
写给媳妇的检讨书
2015/05/06 职场文书
实习单位意见
2015/06/04 职场文书
网吧管理制度范本
2015/08/05 职场文书
python之json文件转xml文件案例讲解
2021/08/07 Python