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实现输入框绑定的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
相关推荐
-
Vue.js中用v-bind绑定class的注意事项
前言 在Vue.js版本:1.0.27,使用Vue.js中V-bind指令来绑定class和style时,Vue.js对其进行了增强.表达式结果出了字符串之外,还可以是对象或者数组. 这里自己对其进行了测试,发现有一下的问题: 如果使用对象语法对class进行绑定话,class名称必须加上引号,代表所对应的样式,否则会将其当做对象的属性,从而使得初始化报错. <!DOCTYPE html> <html lang="en"> <head> <me
-
深入理解vue.js双向绑定的实现原理
前言 大家都知道Vue.js最核心的功能有两个,一是响应式的数据绑定系统,二是组件系统.本文仅探究几乎所有Vue的开篇介绍都会提到的hello world双向绑定是怎样实现的.先讲涉及的知识点,再参考源码,用尽可能少的代码实现那个hello world开篇示例. 一.访问器属性 访问器属性是对象中的一种特殊属性,它不能直接在对象中设置,而必须通过defineProperty()方法单独定义. var obj = { }; // 为obj定义一个名为hello的访问器属性 Object.defin
-
Vue.js每天必学之表单控件绑定
基础用法 可以用 v-model 指令在表单控件元素上创建双向数据绑定.根据控件类型它自动选取正确的方法更新元素.尽管有点神奇,v-model 不过是语法糖,在用户输入事件中更新数据,以及特别处理一些极端例子. Text <span>Message is: {{ message }}</span> <br> <input type="text" v-model="message" placeholder="edit
-
Vue.js每天必学之数据双向绑定
Vue.js 的模板是基于 DOM 实现的.这意味着所有的 Vue.js 模板都是可解析的有效的 HTML,且通过一些特殊的特性做了增强.Vue 模板因而从根本上不同于基于字符串的模板,请记住这点. 插值 文本 数据绑定最基础的形式是文本插值,使用 "Mustache" 语法(双大括号): <span>Message: {{ msg }}</span> Mustache 标签会被相应数据对象的 msg 属性的值替换.每当这个属性变化时它也会更新. 你也可以只处理
-
Vue.js每天必学之Class与样式绑定
数据绑定一个常见需求是操作元素的 class 列表和它的内联样式.因为它们都是 attribute,我们可以用 v-bind 处理它们:只需要计算出表达式最终的字符串.不过,字符串拼接麻烦又易错.因此,在 v-bind 用于 class 和 style 时,Vue.js 专门增强了它.表达式的结果类型除了字符串之外,还可以是对象或数组. 绑定 HTML Class 尽管可以用 Mustache 标签绑定 class,比如 `{% raw %}class="{{ className }}"
-
vue.js入门教程之绑定class和style样式
一.前言 相信大家都知道数据绑定一个常见需求是操作元素的 class 列表和它的内联样式.因为它们都是属性,我们可以用 v-bind 处理它们:我们只需要计算出表达式最终的字符串.不过,字符串拼接麻烦又易错.因此,在v-bind 用于 class 和 style 时,Vue.js 专门增强了它.表达式的结果类型除了字符串之外,还可以是对象或数组. 二.绑定 HTML Class 请注意:尽管可以用 Mustache 标签绑定 class,比如 class="{{ className }}&quo
-
详解Vue.js动态绑定class
Vue.js 的核心是一个响应的数据绑定系统,它允许我们在普通 HTML 模板中使用特殊的语法将 DOM "绑定"到底层数据.被绑定的DOM 将与数据保持同步,每当数据有改动,相应的DOM视图也会更新.基于这种特性,通过vue.js动态绑定class就变得非常简单. 1. 数据绑定 vue 指令以 v- 前缀标示,数据绑定的指令 v-bind:属性名, 简写为 :属性名, 简单的数据绑定例子如下: <a v-bind:href="http://www.cnblogs.c
-
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=
-
vue.js自定义组件directives的实例代码
自定义指令:以v开头,如:v-mybind. 代码示例: <input v-mybind /> directives:{ mybind:{ bind:function (el) { el.value = "this is mybind-bind" } }} 这时页面初始化时,input中会显示this is mybind-bind. 通过directives注册自定义指令mybind,每一个自定义指令中又提供若干钩子,如示例中的bind,bind的作用是定义一个在绑定时执行
-
vue.js实现开关(switch)组件实例代码
最近开发组件的时候,自定义开发了开关(switch)组件,现将代码整理如下,方便日后复用. toggle-switch.vue <template> <label role="checkbox" :class="['switch', { toggled }]"> <input type="checkbox" class="switch-input" @change="toggle&quo
-
vue.js el-table虚拟滚动完整实例代码
目录 前言 实例代码 总结 前言 基于Element-UI的Table 组件开发的虚拟滚动组件,支持动态高度,解决数据量大时滚动卡顿的问题 实例代码 <template> <div ref="listWrap" style="height: 400px; overflow-y: scroll; margin-top: 20px; padding: 10px" @scroll="scrollListener" > <d
-
vue.js实现条件渲染的实例代码
一.初探条件渲染 vue 的条件渲染,仍旧依赖于指令系统,下面逐个介绍: (1)v-if <div id="app"> <div v-if="c1">c1</div> </div> ...... var app = new Vue({ el: '#app', data: { c1: false } }); 当 c1 为真值的时候,渲染出 v-if 所绑定的元素,否则不渲染出该元素.渲染结果如下: <div id=
-
Vue表单绑定的实例代码（单选按钮,选择框（单选时,多选时,用 v-for 渲染的动态选项）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue表单绑定(单选按钮,选择框(单选时,多选时)</title> </head> <body> <!-- 单选按钮 --> <div id="app"> <input type="radio" valu
-
vue 属性拦截实现双向绑定的实例代码
下面通过代码给大家介绍vue 属性拦截实现双向绑定,具体代码如下所示: let obj = {} let get = '' Object.defineProperty(obj, 'get', { set: function(val) { document.getElementById('input').value = val document.getElementById('text').innerHTML = val } }) document.getElementById('input').
-
JS实现移动端实时监听输入框变化的实例代码
如果是在pc端,监听输入框你可能想到focus.blur.hover.onkeyup这些事件,但是如果是在移动端使用使用这些事件用户体验极差,因为你要用户收起键盘并且再点个空白处才生效,甚至还存在很大的兼容差异.那么怎么解决呢? 方案一 以前做一个简单的模糊搜索框的需求,大致思路是定义一个1s左右执行的定时器,定时器函数里面的逻辑是 判断文本框内容的长度,如果跟上一次长度有变化,就走一遍查询,如果没有变化不执行任何操作. 方案二 利用jquery提供的 input propertychange
-
Vue.js做select下拉列表的实例(ul-li标签仿select标签)
目标:用ul-li标签结合Vue.js知识做一个模仿select标签的下拉选项列表. 知识点: 组件的写法及运用 组件之间的数据传递(props的运用) 组件之间的数据传递($emit的运用) 动态数据的绑定(v-bind) 自定义事件通信 效果图: 1.未做任何操作前,下拉列表为隐藏状态 2.点击输入框显示下拉列表 3. 点击列表项,输入框值跟随改变 PS: 为了演示data1, data2两组数据的绑定,实例中创建了两个列表 html代码: <!DOCTYPE html> <html
-
用ES6的class模仿Vue写一个双向绑定的示例代码
本文介绍了用ES6的class模仿Vue写一个双向绑定的示例代码,分享给大家,具体如下: 最终效果如下: 构造器(constructor) 构造一个TinyVue对象,包含基本的el,data,methods class TinyVue{ constructor({el, data, methods}){ this.$data = data this.$el = document.querySelector(el) this.$methods = methods // 初始化 this._com