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. NGINX优化参数

    (1)nginx运行工作进程个数,一般设置cpu的核心或者核心数x2 如果不了解cpu的核数,可以top命令之后按1看出来,也可以查看/proc/cpuinfo文件 grep ^processor / ...

  2. input即时————模糊匹配（纯html+jquery简单实现）

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  3. docker remote api enable in ubuntu

    现在使用docker作为开发环境,操作系统是ubuntu16.10,pycharm中使用remote interpreter,需要用到remote api,结果发现自己的原答案是针对ubuntu 14 ...

  4. java generic super, extend

    //Apple Orange 都继承自Fruit类,同时Jonathan是Apple的子类    List<? extends Fruit> list = new ArrayList< ...

  5. 微信小程序登录时序图

    https://developers.weixin.qq.com/miniprogram/dev/api/api-login.html

  6. python 面向对象（进阶篇）转载武沛齐

    上一篇<Python 面向对象(初级篇)>文章介绍了面向对象基本知识: 面向对象是一种编程方式,此编程方式的实现是基于对 类 和 对象 的使用 类 是一个模板,模板中包装了多个“函数”供使 ...

  7. generateScriptFile.py脚本使用过程中遇到的问题及解决

    generateScriptFile.py脚本 #!/usr/bin/env python # -*- coding: utf-8 -*- """ use case: p ...

  8. Keras + Ubuntu环境搭建

    安装Theano (环境参数:Ubuntu 16.04.2  Python 2.7) 安装 numpy 和 scipy 1.sudo apt-get install python-numpy pyth ...

  9. 本书版权输出到台湾地区，《深入理解Android内核设计思想》诚挚感谢大家一直以来的支持！

  10. ALV tree DUMP 问题处理-20180328

    Category ABAP Programming Error Runtime Errors MESSAGE_TYPE_X ABAP Program SAPLOLEA Application Comp ...