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. Ubuntu安装Python3 和卸载

    Python2中文的解决 在py文件第一行添加 #coding=utf-8 1 规范的应该这么写 #-*- coding:utf-8 -*- 1 安装python 系统默认安装Python2 安装Py ...

  3. Python的编码问题（一）

    一.什么是编码 可以说,计算机是一个即聪明又笨蛋的家伙.说它聪明,是因为他可以做很多事情,它的强大无需多说,大家应该都有所了解以及感受.但是为什么说它又是个笨蛋呢,因为我们在电脑上写出的每一个字,保存 ...

  4. django 模板语言之 simple_tag 自定义模板

    自定义函数 simple_tag a. app项目下创建templatetags目录 b. 创建任意xxoo.py文件 用做自定义py函数 c. 创建template对象 register 在函数或者 ...

  5. Spark2.0机器学习系列之4：Logistic回归及Binary分类（二分问题）结果评估

    参数设置 α: 梯度上升算法迭代时候权重更新公式中包含 α :  http://blog.csdn.net/lu597203933/article/details/38468303 为了更好理解 α和 ...

  6. 关于理财和买房 http://shouce.jb51.net/phpcms/ https://www.bj.cmbchina.com/bjtransweb/wsgzd_employ/login.jsp

    对于绝大多数家境普通的年轻人来说,青年阶段无疑是一生中手头最紧的时候.原因很简单,这个阶段花钱最多,挣钱却最少.年轻人收入往往是硬性的低,开支却往往是硬性   的高.已经加班到晕头转向的小职员,很难再 ...

  7. Django框架_URLconf、Views、template、ORM

    目录: 一.Django-MTV MTV模型 Django基本命令 视图层之路由配置系统(views) 视图层之视图函数(views) 模板层(template) 二.Django-model基础 O ...

  8. ECMAScript与JavaScript

    ECMAScript发展史: 1997 1998.6 1999.12 2008.7 2009.12 2015.61996年11月 javaScript创造者Netscape公司将javaScript提 ...

  9. hive报错汇总

    1.需要注意的是,要在namenode(超级用户)上操作,貌似是 hive> insert into table record_partition partition(trancation_da ...

  10. Python日期字符串比较

    作者:Syn良子 出处:http://www.cnblogs.com/cssdongl 转载请注明出处 需要用python的脚本来快速检测一个文件内的二个时间日期字符串的大小,其实实现很简单,首先一些 ...