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 相关文章推荐
动态调用css文件——jquery的应用
Feb 20 Javascript
js 绑定带参数的事件以及手动触发事件
Apr 27 Javascript
js判断浏览器类型的方法
Aug 07 Javascript
JavaScript学习笔记之DOM基础 2.4
Aug 14 Javascript
javascript引用类型之时间Date和数组Array
Aug 27 Javascript
JavaScript实现多种排序算法
Feb 24 Javascript
炫酷的js手风琴效果
Oct 13 Javascript
基于JavaScript实现屏幕滚动效果
Jan 18 Javascript
jquery 实现复选框的全选操作实例代码
Jan 24 Javascript
用vue的双向绑定简单实现一个todo-list的示例代码
Aug 03 Javascript
微信小程序实现两边小中间大的轮播效果的示例代码
Dec 07 Javascript
jQuery实现验证用户登录
Dec 10 jQuery
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 MYSQL中插入当前时间
2008/04/06 PHP
php统计数组元素个数的方法
2015/07/02 PHP
Zend Framework入门知识点小结
2016/03/19 PHP
ubutu 16.04环境下,PHP与mysql数据库,网页登录验证实例讲解
2017/07/20 PHP
PHP设计模式之工厂模式详解
2017/10/24 PHP
PHP html_entity_decode()函数讲解
2019/02/25 PHP
function, new function, new Function之间的区别
2007/03/08 Javascript
javascript全局变量封装模块实现代码
2012/11/28 Javascript
js获取height和width的方法说明
2013/01/06 Javascript
Table冻结表头示例代码
2013/08/20 Javascript
javascript实现简单的Map示例介绍
2013/12/23 Javascript
javascript跨域原因以及解决方案分享
2015/04/08 Javascript
Javascript的表单与验证-非空验证
2016/03/18 Javascript
js微信分享API
2020/10/11 Javascript
javascript实现下雨效果
2017/03/27 Javascript
jquery实现tab键进行选择后enter键触发click行为
2017/03/29 jQuery
docker中编译nodejs并使用nginx启动
2017/06/23 NodeJs
js实现按钮开关单机下拉菜单效果
2018/11/22 Javascript
使用Python编写一个在Linux下实现截图分享的脚本的教程
2015/04/24 Python
在Python程序中进行文件读取和写入操作的教程
2015/04/28 Python
Python中操作符重载用法分析
2016/04/29 Python
Python set常用操作函数集锦
2017/11/15 Python
基于python批量处理dat文件及科学计算方法详解
2018/05/08 Python
Pycharm导入Python包,模块的图文教程
2018/06/13 Python
Python编程在flask中模拟进行Restful的CRUD操作
2018/12/28 Python
Python操作rabbitMQ的示例代码
2019/03/19 Python
python操作openpyxl导出Excel 设置单元格格式及合并处理代码实例
2019/08/27 Python
使用Tensorflow-GPU禁用GPU设置(CPU与GPU速度对比)
2020/06/30 Python
解决python3.6用cx_Oracle库连接Oracle的问题
2020/12/07 Python
精选鞋类、服装和配饰的全球领先目的地:Bodega
2021/02/27 全球购物
高分子材料个人求职信范文
2013/09/25 职场文书
铁路个人事迹材料
2014/01/30 职场文书
广播节目策划方案
2014/05/23 职场文书
我的中国梦演讲稿400字
2014/08/19 职场文书
孝敬父母的活动方案
2014/08/28 职场文书
如何解决goland,idea全局搜索快捷键失效问题
2022/04/03 Golang