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. 160429、nodejs--Socket.IO即时通讯

    动态web 在html5以前,web的设计上并没有考虑过动态,他一直是围绕着文档设计的,我们看以前比较老的网站,基本上都是某一刻用来显示单一的文档的,用户请求一次web页面,获取一个页面,但是随着时间 ...

  2. vue通信

    组件实例的作用域是孤立的. 一.父子通信 父组件通过props向下传递数据给子组件,子组件通过events给父组件发送消息. 要让子组件使用父组件的数据,我们需要通过子组件的props选项.prop是 ...

  3. linux查看硬件信息的方法

    目前会Linux的人不少,但是精通的不多,怎样才能做一个符合企业需求的Linux人才,首先要有良好的Linux基础知识.本文为你讲解Linux的知识,今天所讲的是 Linux硬件信息怎样查看,希望你能 ...

  4. Spark源码分析 – 汇总索引

    http://jerryshao.me/categories.html#architecture-ref http://blog.csdn.net/pelick/article/details/172 ...

  5. 观 浅谈HTTP中Get与Post的区别

    看完解决了一些模糊不清的.错误的理解.

  6. Python并行编程(十一)：基于进程的并行

    1.基本概念 多进程主要用multiprocessing和mpi4py这两个模块. multiprocessing是Python标准库中的模块,实现了共享内存机制,可以让运行在不同处理器核心的进程能读 ...

  7. 5.Git版本库创建

    1.什么是版本库呢? 什么是版本库呢?版本库又名仓库,英文名repository,你可以简单理解成一个目录,这个目录里面的所有文件都可以被Git管理起来,每个文件的修改.删除,Git都能跟踪,以便任何 ...

  8. （2.7）Mysql之SQL基础——表的操作与查看

    (2.7)Mysql之SQL基础——表的操作与查看 搜索关键字:mysql表操作,comment注释操作,mysql临时表 0.临时表 create temporary table 1.创建表(在in ...

  9. python web框架 Django的APP以及目录介绍 2

    app: migrations 数据修改表结构 admin Django为我们提供的后台管理 apps 配置当前app models ORM,写指定的类 通过命令可以创建数据库结构 tests 单元测 ...

  10. Powerdesigner显示列名

    设置要修改的列 点击ok即可.