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 相关文章推荐
Prototype源码浅析 String部分(二)
Jan 16 Javascript
JS Replace()的高级使用方法介绍
Jun 29 Javascript
js判断页面中是否有指定控件的简单实例
Mar 04 Javascript
如何用jquery控制表格奇偶行及活动行颜色
Apr 20 Javascript
ExtJS4 表格的嵌套 rowExpander应用
May 02 Javascript
如何使用HTML5地理位置定位功能
Apr 27 Javascript
js实现鼠标划过给div加透明度的方法
May 25 Javascript
jQuery验证插件validate使用方法详解
Sep 13 Javascript
原生js简单实现放大镜特效
May 16 Javascript
详解实现一个通用的“划词高亮”在线笔记功能
Apr 23 Javascript
vue项目里面引用svg文件并给svg里面的元素赋值
Aug 17 Javascript
js禁止查看源文件屏蔽Ctrl+u/s、F12、右键等兼容IE火狐chrome
Oct 01 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之sprintf函数用法详解
2014/11/12 PHP
php 根据自增id创建唯一编号类
2017/04/06 PHP
PHP中abstract(抽象)、final(最终)和static(静态)原理与用法详解
2020/06/05 PHP
从Ajax到JQuery Ajax学习
2007/02/14 Javascript
javascript 命名空间以提高代码重用性
2008/11/13 Javascript
Javascript JSQL,SQL无处不在,
2010/05/05 Javascript
JQuery自适应IFrame高度(支持嵌套 兼容IE,ff,safafi,chrome)
2011/03/28 Javascript
JQuery获取当前屏幕的高度宽度的实现代码
2011/07/12 Javascript
jQuery如何取id有.的值一般的方法是取不到的
2014/04/18 Javascript
在NodeJS中启用ECMAScript 6小结(windos以及Linux)
2014/07/15 NodeJs
javascript 中的 delete及delete运算符
2015/11/15 Javascript
jquery mobile 移动web(5)
2015/12/20 Javascript
自学实现angularjs依赖注入
2016/12/20 Javascript
jQuery+HTML5实现弹出创意搜索框层
2016/12/29 Javascript
Angular项目从新建、打包到nginx部署全过程记录
2017/12/09 Javascript
vue-cli配置flexible过程详解
2019/07/04 Javascript
微信小程序下拉加载和上拉刷新两种实现方法详解
2019/09/05 Javascript
解决antd datepicker 获取时间默认少8个小时的问题
2020/10/29 Javascript
JavaScript实现网页留言板功能
2020/11/23 Javascript
vuex的数据渲染与修改浅析
2020/11/26 Vue.js
jQuery实现tab栏切换效果
2020/12/22 jQuery
Windows下的Python 3.6.1的下载与安装图文详解(适合32位和64位)
2018/02/21 Python
树莓派采用socket方式文件传输(python)
2019/06/22 Python
pytorch中的上采样以及各种反操作,求逆操作详解
2020/01/03 Python
css3 iphone玻璃透明气泡完美实现
2013/03/20 HTML / CSS
CSS3 input框的实现代码类似Google登录的动画效果
2020/08/04 HTML / CSS
世界第一冲浪品牌:O’Neill
2016/08/30 全球购物
俄罗斯旅游网站:Tripadvisor俄罗斯
2017/03/21 全球购物
英国网上购买肉类网站:Great British Meat
2018/10/17 全球购物
英国第一职业高尔夫商店:Clickgolf.co.uk
2020/11/18 全球购物
怀念母亲教学反思
2014/04/28 职场文书
教师专业自荐信
2014/05/31 职场文书
初中家长评语大全
2014/12/26 职场文书
2015年机关党委工作总结
2015/05/23 职场文书
2016高考寄语或鼓励的话语
2015/12/04 职场文书
团干部培训班心得体会
2016/01/06 职场文书