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实现输入框绑定的更多相关文章

  1. Web前端-Vue.js必备框架(四)

    Web前端-Vue.js必备框架(四) 计算属性: <div id="aaa"> {{ message.split('').reverse().join('') }} ...

  2. Web前端-Vue.js必备框架(三)

    Web前端-Vue.js必备框架(三) vue是一款渐进式javascript框架,由evan you开发.vue成为前端开发的必备之一. vue的好处轻量级,渐进式框架,响应式更新机制. 开发环境, ...

  3. Web前端-Vue.js必备框架(一)

    Web前端-Vue.js必备框架(一) <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  4. Web前端-Vue.js必备框架(五)

    Web前端-Vue.js必备框架(五) 页面组件,商品列表组件,详情组件,购物车清单组件,结算页组件,订单详情组件,订单列表组件. vue-router 路由 vuex 组件集中管理 webpack ...

  5. Web前端-Vue.js必备框架(二)

    Web前端-Vue.js必备框架(二) vue调式工具vue-devtools 过滤器:vue.js允许你自定义过滤器,可被用作一些常见的文本格式化. mustache插值和v-bind表达式. vu ...

  6. vue.js 中双向绑定的实现---初级

    1. 1 我们看到的变量,其实都不是独立的,它们都是windows对象上的属性 <!DOCTYPE html> <html lang="en"> <h ...

  7. web前端——Vue.js基础学习

    近期项目的前端页面准备引入Vue.js,看了网上一些简介,及它和JQuery的对比,发现对于新入门的前端开发来说,Vue 其实也是比较适用的一个框架,其实用性不比JQuery差,感觉还挺有意思,于是研 ...

  8. 前端——Vue.js学习总结一

    一.什么是Vue.js 1.Vue.js 是目前最火的一个前端框架,React是最流行的一个前端框架 2.Vue.js 是前端的主流框架之一,和Angular.js.React.js 一起,并成为前端 ...

  9. 偏前端-vue.js学习之路初级(二)组件化构建

    vue.js   组件化构建 组件系统是 Vue 的另一个重要概念,因为它是一种抽象,允许我们使用小型.自包含和通常可复用的组件构建大型应用.仔细想想,几乎任意类型的应用界面都可以抽象为一个组件树: ...

随机推荐

  1. lsof,fuser,xargs,print0,cut,paste,cat,tac,rev,exec,{},双引号,单引号,‘(字符串中执行命令)

    cut用来从文本文件或标准输出中抽取数据列或者域,然后再用paste可以将这些数据粘贴起来形成相关文件. 粘贴两个不同来源的数据时,首先需将其分类,并确保两个文件行数相同.paste将按行将不同文件行 ...

  2. Webpack4.x 入门

    概览 新建项目 npm init -y 安装webpack & webpack-cli (c)npm install -D webpack (c)npm install -D webpack- ...

  3. log4cpp简单示例

    log4cpp简单示例 下载地址 Sample.cpp #include <iostream> #include <log4cpp/FileAppender.hh> #incl ...

  4. docker网络实践

    docker网络.md #docker 网络模式 环境 centos7.4 , Docker version 17.12.0-ce docker自带网络类型 bridge,host,none,cont ...

  5. Web应用扩展系列(1):架构篇(转)

    原文:Web应用扩展系列(1):架构篇 在这篇文章中,我将尽量涵盖Web应用扩展或性能调优时可能会遇到的一些架构问题. 首先,让我们来统一一些名词或项目的概念,下文中我将列举在扩展Web应用时可能会遇 ...

  6. ansible(1)

    一.初识ansible 1.准备工作: 准备四台干净的虚拟机,如下: 192.168.133.129(主控节点,下面三个为被控节点) 192.168.133.130 192.168.133.131 1 ...

  7. linux的虚拟机时间和物理机时间同步

    1.查看和设置物理机硬件时间 查看硬件时间# hwclock --show或# clock --show 设置硬件时间# hwclock --set --date=”01/14/19 10:19″(月 ...

  8. php注册审查

    思路 用户注册后就有该条用户记录,你对用户表设一个“审核状态”字段,默认值设为“未审核”,然后你写几句审核代码做成一个功能,按照你们的意愿若审核通过你把审核状态改为“已审核”就行了.用户想进行各种操作 ...

  9. java.sql.SQLException: Streaming result set com.mysql.jdbc.RowDataDynamic@27ce24aa is still active. No statements may be issued when any streaming result sets are open and in use on a given connection

    在Sqoop往mysql导出数据的时候报了这个错误,一开始还以为是jar包没有打进去或者打错位置了,未解便上网查询. Error reading from database: java.sql.SQL ...

  10. Oracle 分组函数

    分组函数的介绍 分组函数作用于一组数据,并对一组数据返回一个值. (引用网上的一张图) 分组函数的使用规则 SELECT [column,] group_function(column) FROM t ...