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. SaltStack数据系统-Grains

    上一篇:SaltStack配置管理 granis:谷粒 pillar:柱子 grains是salt的一个组件,存放minion启动时候收集的信息(状态信息) 查看 salt '*' grains.it ...

  2. http协议------>概述和动手实践认识Http协议

    http协议是用来定义客户端和web服务器通讯格式 浏览器与服务器的交互过程 是tcp/ip的应用层 版本:http/1.0(客户端和web服务器建立连接后只能访问一个web资源)   http/1. ...

  3. uilabel 自适应

    有时一个UILable的text内容是变化的,而且差异有很大, 需求上要求UILabel的大小高宽能够自适应text的内容.代码例子: myLable=[[UILabel alloc] initWit ...

  4. Restful and 前后端分离---AutoTest newman--postman

    http://www.cnblogs.com/zuoshaowei/p/6192863.html https://www.getpostman.com/docs/newman_intro swagge ...

  5. ubuntu 上已经安装libxml2还提示需要reinstall的解决方法

    最近在ubuntu上配置环境,遇到一些奇怪的问题,已经安装了libxml2了,运行 apt-get install libxml2提示已经是最新版本了,可以在安装软件的时候还是提示没有libxml2, ...

  6. 安装串口设备驱动时遇到 Windows 无法验证此设备所需的驱动程序的数字签名。最近的硬件或软件更改安装的文件可能未正确签名或已损坏，或者可能是来自未知来源的恶意软件. 问题该如何处理？

    win7 系统直接在 cmd 命令行中输入以下语句,重启电脑后重新安装驱动即可. BCDEDIT -SET LOADOPTIONS DISABLE_INTEGRITY_CHECKS BCDEDIT - ...

  7. Python np.newaxis

    np.newaxis的功能是插入新维度,看下面的例子: a=np.array([1,2,3,4,5])print a.shape print a 输出结果 (5,)[1 2 3 4 5] 可以看出a是 ...

  8. python学习笔记（十五）异常处理

    python解析器去执行程序,检测到了一个错误时,触发异常,异常触发后且没被处理的情况下,程序就在当前异常处终止,后面的代码不会运行,所以你必须提供一种异常处理机制来增强你程序的健壮性与容错性 . 例 ...

  9. 已经安装好了的lamp或者lnmp环境，编译其他的模块进来？

    问题: 如何为已经编译好了的环境再次编译其他的模块? 方法: 一般分为两种情况: 1. php的源码安装包中本来就有这个 .so 的扩展,我们只需要进入到php的安装源码包中的ext文件夹下,然后找到 ...

  10. 详解MySQL第一篇—MySQL简要介绍及DDL语句

    背景:近几年,开源数据库逐渐流行起来.由于具有免费使用.配置简单.稳定性好.性能优良等优点,开源数据库在中低端应用上占据了很大的市场份额,而 MySQL 正是开源数据库中的杰出代表.MySQL 数据库 ...