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 !!的作用
Dec 04 Javascript
jQuery学习笔记(1)--用jQuery实现异步通信(用json传值)具体思路
Apr 08 Javascript
javascript之typeof、instanceof操作符使用探讨
May 19 Javascript
JS连接SQL数据库与ACCESS数据库的方法实例
Nov 21 Javascript
jQuery插件pagination实现分页特效
Apr 12 Javascript
JavaScript实现的简单幂函数实例
Apr 17 Javascript
实例讲解JS中setTimeout()的用法
Jan 28 Javascript
如何使用AngularJs打造权限管理系统【简易型】
May 09 Javascript
Bootstrap CDN和本地化环境搭建
Oct 26 Javascript
vue中简单弹框dialog的实现方法
Feb 26 Javascript
JS开发 富文本编辑器TinyMCE详解
Jul 19 Javascript
vue-admin-template配置快捷导航的代码(标签导航栏)
Sep 04 Javascript
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
php SQL Injection with MySQL
2011/02/27 PHP
PHP实现今天是星期几的几种写法
2013/09/26 PHP
php随机取mysql记录方法小结
2014/12/27 PHP
php+ajax无刷新分页实例详解
2015/12/07 PHP
PHP获取当前文件的父目录方法汇总
2016/07/21 PHP
mac系统下为 php 添加 pcntl 扩展
2016/08/28 PHP
学习YUI.Ext 第六天--关于树TreePanel(Part 2异步获取节点)
2007/03/10 Javascript
20行代码实现的一个CSS覆盖率测试脚本
2013/07/07 Javascript
JS获取DropDownList的value值与text值的示例代码
2014/01/07 Javascript
使用text方法获取Html元素文本信息示例
2014/09/01 Javascript
详解http访问解析流程原理
2017/10/18 Javascript
MVVM 双向绑定的实现代码
2018/06/21 Javascript
json前后端数据交互相关代码
2018/09/19 Javascript
Vue 重置组件到初始状态的方法示例
2018/10/10 Javascript
Vue.js项目实战之多语种网站的功能实现(租车)
2019/08/07 Javascript
微信小程序实现页面分享onShareAppMessage
2019/08/12 Javascript
微信小程序实现手势滑动卡片效果
2019/08/26 Javascript
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
2021/01/08 Vue.js
Python中的迭代器与生成器高级用法解析
2016/06/28 Python
Python利用flask sqlalchemy实现分页效果
2020/08/02 Python
python+pygame实现坦克大战
2019/09/10 Python
Python调用C语言程序方法解析
2020/07/07 Python
奥地利顶级内衣丝袜品牌英国站:Wolford英国
2016/08/29 全球购物
玩具反斗城美国官网:Toys"R"Us
2016/09/17 全球购物
英国复古服装和球衣购买网站:3Retro Football
2018/07/09 全球购物
财会自我鉴定范文
2013/12/27 职场文书
文明餐桌活动方案
2014/02/11 职场文书
警察正风肃纪剖析材料
2014/10/16 职场文书
2014年实习生工作总结
2014/11/27 职场文书
民主生活会汇报材料
2014/12/15 职场文书
初中学生操行评语
2014/12/26 职场文书
安全教育主题班会教案
2015/08/12 职场文书
2016年小学生教师节广播稿
2015/12/18 职场文书
mybatis中注解与xml配置的对应关系和对比分析
2021/08/04 Java/Android
Java8利用Stream对列表进行去除重复的方法详解
2022/04/14 Java/Android
SpringBoot接入钉钉自定义机器人预警通知
2022/07/15 Java/Android