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. java面试基础题------》抽象类和接口有什么异同

    划重点!!!! 1.抽象类(abstract class)和接口(interface)有什么异同? 相同点 * 都不能被直接实例化,都可以通过继承实现其抽象方法. * 都是面向抽象编程的技术基础,实现 ...

  2. make_ext4fs 失败

    root@fengyun-server:/home/fmake_ext4fsengyun/android/reverse_engineer/rom制作# ./make_ext4fs -l 700M - ...

  3. cmd运行php

    w D:\wamp64\bin\php\php7.0.4\php.exe  执行了 D:\wamp64\bin\php\php7.0.4\wtest.php

  4. lsof,fuser,xargs,print0,cut,paste,cat,tac,rev,exec,{},双引号，单引号，‘（字符串中执行命令）

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

  5. 剑指Offer——二进制中1的个数

    题目描述: 输入一个整数,输出该数二进制表示中1的个数.其中负数用补码表示. 分析: 加入一个数的二进制位是XXX...XXX1000...000,那么这个数减去1,就会变成XXX...XXX0111 ...

  6. nginx.conf常用配置解析

    一.全局配置 user username groupname 运行用户及用户组 worker_processes auto 启动进程,通常设置成和cpu数量相等的一个数值,默认为1.可以设置为auto ...

  7. Spark机器学习系列之13： 支持向量机SVM

    Spark 优缺点分析 以下翻译自Scikit. The advantages of support vector machines are: (1)Effective in high dimensi ...

  8. 避免SSH连接因超时闲置断开

    用SSH过程连接电脑时,经常遇到长时间不操作而被服务器踢出的情况,常见的提示如: Write failed: Broken pipe 这是因为如果有一段时间在SSH连接上无数据传输,连接就会断开.解决 ...

  9. 给定1-a的随机数生成器，产生1-b的随机数生成器

    转自http://www.code123.cc/959.html 先给出一个例子,后面会有扩展 题目 给你一个能生成1到5随机数的函数,用它写一个函数生成1到7的随机数. (即:使用函数rand5() ...

  10. Python编程题总结

    1 数学篇 1.1 斐波那契数列 def fib(n): if n in (0, 1): return n fib_n1, fib_n2 = 0, 1 for i in range(2, n + 1) ...