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 相关文章推荐
IE与firefox之jquery用法区别
Oct 03 Javascript
JavaScript 设计模式学习 Factory
Jul 29 Javascript
jquery scrollTop方法根据滚动像素显示隐藏顶部导航条
May 27 Javascript
js语法学习之判断一个对象是否为数组
May 13 Javascript
JavaScript实现表格点击排序的方法
May 11 Javascript
jQuery焦点图轮播特效代码分享(3款)
Sep 05 Javascript
微信小程序 登录实例详解
Jan 16 Javascript
JS实现选定指定HTML元素对象中指定文本内容功能示例
Feb 13 Javascript
bootstrap中模态框、模态框的属性实例详解
Feb 17 Javascript
在axios中使用params传参的时候传入数组的方法
Sep 25 Javascript
vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】
Nov 08 Javascript
详解vue项目中实现图片裁剪功能
Jun 07 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实现防盗链的方法分析
2017/07/25 PHP
简单的php购物车代码
2020/06/05 PHP
如何在Mozilla Gecko 用Javascript加载XSL
2007/01/09 Javascript
javascript-TreeView父子联动效果保持节点状态一致
2007/08/12 Javascript
JavaScript 对象链式操作测试代码
2010/04/25 Javascript
jQuery的attr与prop使用介绍
2013/10/10 Javascript
Jquery获取元素的父容器对象示例代码
2014/02/10 Javascript
js时钟翻牌效果实现代码分享
2020/07/31 Javascript
jquery遍历json对象集合详解
2016/05/18 Javascript
基于jQuery实现仿微博发布框字数提示
2016/07/27 Javascript
微信小程序 Image API实例详解
2016/09/30 Javascript
jQuery实现弹出窗口弹出div层的实例代码
2017/01/09 Javascript
微信小程序 input输入框详解及简单实例
2017/01/10 Javascript
如何写好你的JavaScript【推荐】
2017/03/02 Javascript
javascript简写常用的12个技巧(可以大大减少你的js代码量)
2020/03/28 Javascript
JavaScript代码判断输入的字符串是否含有特殊字符和表情代码实例
2017/08/17 Javascript
vue-router相关基础知识及工作原理
2018/03/16 Javascript
详解vue添加删除元素的方法
2018/06/30 Javascript
vue 使某个组件不被 keep-alive 缓存的方法
2018/09/21 Javascript
javascript利用键盘控制小方块的移动
2020/04/20 Javascript
js事件机制----捕获与冒泡机制实例分析
2020/05/22 Javascript
design vue 表格开启列排序的操作
2020/10/28 Javascript
新手如何快速入门Python(菜鸟必看篇)
2017/06/10 Python
浅谈python编译pyc工程--导包问题解决
2019/03/20 Python
详解用python写一个抽奖程序
2019/05/10 Python
python中的句柄操作的方法示例
2019/06/20 Python
Pandas中resample方法详解
2019/07/02 Python
Keras自定义实现带masking的meanpooling层方式
2020/06/16 Python
希尔顿酒店中国网站:Hilton中国
2017/03/11 全球购物
伦敦眼门票在线预订:London Eye
2018/05/31 全球购物
2014年重阳节老干部座谈会上的讲话稿
2014/09/25 职场文书
红楼梦读书笔记
2015/06/25 职场文书
2019运动会广播加油稿汇总
2019/08/21 职场文书
如何用JavaScipt测网速
2021/05/09 Javascript
Python基于百度AI实现抓取表情包
2021/06/27 Python
Win11怎么把合并的任务栏分开 Win11任务栏合并分开教程
2022/04/06 数码科技