Vue.js_数据绑定
一、文本
data
{{data}}
<div id="div1">{{message}}</div>
<script>
var div1 = new Vue({
el: "#div1",
data: {
message:"Hello Vue.js!"
}
})
</script>
页面:
二、属性
data
v-bind:attr="data"
<style>
.title{ width:300px; height:45px; background:#ffd800; border:1px solid #b6ff00; }
</style>
<div id="div2" v-bind:class="addClass" v-bind:title="addTitle"></div>
<script>
var div2 = new Vue({
el: "#div2",
data: {
addClass: "title",
addTitle:"这是一个div"
}
})
</script>
页面:
三、Html
data
v-html="data"
<div id="div3" v-html="addHtml"></div>
<script>
var div3 = new Vue({
el: "#div3",
data: {
addHtml:"<input type='text' />"
}
})
</script>
页面:
四、用户输入数据
methods
v-model="data" + {{data}}
<div id="input1">
<input type="text" v-model="info" />
<p>{{info}}</p>
</div>
<script>
var input1 = new Vue({
el: "#input1",
data: {
info:"请在此输入数据测试"
}
})
</script>
页面:
五、监听事件
methods
v-on:Event="function"
<input id="input2" type="button" value="点击试试" v-on:click="clickTest" />
<script>
var input2 = new Vue({
el: "#input2",
methods: {
clickTest: function () {
alert("点击成功!");
}
}
})
</script>
页面:
【初始打开时】 【点击后】
六、过滤器
filters
{{data|function}}
<div id="div4">
{{message|Handle}}
</div>
<script>
var div4 = new Vue({
el: "#div4",
data: {
message:885
},
filters: {
Handle: function (val) {
return val + "+ 500=" + (val + 500);
}
}
})
</script>
接收将表达式中的第一个值,作为方法的一个参数传入,并返回值。用于过滤某个值得表现形式或对其进行格式化
页面:
进价多参,多值传递过滤
<div id="div4">
{{message|moreVal(10,20)}}<br /><!--885+10+20=915-->
{{message|transmit(20)|moreVal(10,20)}}<!--905+10+20=935 , 解析:905=885+20-->
</div>
<script>
var div4 = new Vue({
el: "#div4",
data: {
message: 885
},
filters: {
Handle: function (val) {
return val + "+ 500=" + (val + 500);
},
moreVal: function (a, b, c) {
return a + "+" + b + "+" + c + "=" + (a + b + c);
},
transmit: function (arg1, arg2) {
return arg1 + arg2;
}
}
})
</script>
说明:过滤器会接收多次传递,默认将表达式的第一个值,参数传递给下一个的表达式,就这样依次传递,直到最后一个
解析:{{message|Handle}}
将message作为参数传递给Handle,Handle带入过滤器方法然后返回结果:885+ 500=1385
解析:{{message|moreVal(10,20)}}
将message作为参数传递给moreVal,并默认传递第二参数为10,第三参数为20,moreVal带入过滤器方法然后返回结果:885+10+20=915
解析:{{message|transmit(20)|moreVal(10,20)}}
将message作为参数传递给transmit,并默认传递第二参数为20,transmit带入过滤器方法然后返回结果:905
将transmit返回结果905,继续传递给moreVal,并默认传递第二参数为10,第三参数为20,moreVal带入过滤器方法然后返回结果:905+10+20=935
页面:
Vue.js_数据绑定的更多相关文章
- vue 双向数据绑定的实现学习(二)- 监听器的实现
废话:上一篇https://www.cnblogs.com/adouwt/p/9928278.html 提到了vue实现的基本实现原理:Object.defineProperty() -数据劫持 和 ...
- vue 双向数据绑定的实现学习(一)
前言:本系列学习笔记从以下几个点展开 什么是双向数据绑定 双向数据绑定的好处 怎么实现双向数据绑定 实现双向数据数据绑定需要哪些知识点 数据劫持 发布订阅模式 先看看我们要实现的目标是什么,如下动图: ...
- vue双向数据绑定的简单实现
vue双向数据绑定的简单实现 参考教程:链接 <!DOCTYPE html> <html lang="en"> <head> <meta ...
- Vue双向数据绑定原理分析(转)
add by zhj: 目前组里使用的是前端技术是jQuery + Bootstrap,后端使用的Django,Flask等,模板是在后端渲染的.前后端没有分离,这种做法有几个缺点 1. 模板一般是由 ...
- angular和vue双向数据绑定
angular和vue双向数据绑定的原理(重点是vue的双向绑定) 我在整理javascript高级程序设计的笔记的时候看到面向对象设计那章,讲到对象属性分为数据属性和访问器属性,我们平时用的js对象 ...
- vue.js数据绑定
语法 插值 双大括号:{{text}} {{*text}}之渲染第一次 {{{html}}} 表达式(各种数值,变量,运算符的综合体) ...
- Vue.js 数据绑定语法详解
Vue.js 数据绑定语法详解 一.总结 一句话总结:Vue.js 的模板是基于 DOM 实现的.这意味着所有的 Vue.js 模板都是可解析的有效的 HTML,且通过一些特殊的特性做了增强.Vue ...
- vue双向数据绑定最最最最最简单直观的例子
vue双向数据绑定最最最最最简单直观的例子 一.总结 一句话总结:双向绑定既不仅model可以影响view的数据,view也可以影响model的数据 view model 数据 1.vue双向数据绑定 ...
- React 事件对象、键盘事件、表单事件、ref获取dom节点、react实现类似Vue双向数据绑定
1.案例实现代码 import React, { Component } from 'react'; /** * 事件对象.键盘事件.表单事件.ref获取dom节点.react实现类似Vue双向数据绑 ...
随机推荐
- GridView中实现全选与取消全选,以便同时删除多条数据
我们项目后台操作中不可避免的会有同时删除多项的操作,本文实现的就是当点击全选时,选定当前页中所有项,当取消了某一项的选定,则“全选”CheckBox的checked也为false:然后在后台中取到所选 ...
- ASDASASD
测试 markdown 随笔 asdsdf sdf
- codility上的问题(34) Fluorum 2014
好久没写codility的题了.一来没时间,二来有的题目不太好分析.这个题比較有意思,我还没有给出很严格的证明.
- atitit.session的原理以及设计 java php实现的异同
atitit.session的原理以及设计 java php实现的异同 1. session的保存:java在内存中,php脚本因为不能常驻内存,所以在文件中 1 2. php的session机制 1 ...
- 如何有效地提升JavaScript 水平?
lyuehh 努力学习中.. 9 人赞同 简单的介绍一下, 不一定准确, 大家一起进步... (单词大小写什么的别计较....) 学习js主要是一下几个方面, js语言本身的知识, 和浏览器相关的知识 ...
- 名词解释 ssl、tls、key、crt、cer、x509
1. SSL:安全套接字层 Secure Socket Layer的缩写 2. TLS:传输层安全协议 Transport Layer Security的缩写 ,SSL的继任者 3. KEY:通常指 ...
- ubus
openwrt提供了一个系统总线ubus,类似linux桌面操作系统的d-bus,目标是提供系统级的进程间通信(IPC)功能. 为了提供各种后台进程和应用程序之间的通信机制,ubus被开发出来,由3部 ...
- 远程访问Mysql的解决方案
在网上有很多关于这个的解决方案,我也采用了 写的比较详细的如:1. 改表法. 可能是你的帐号不允许从远程登陆,只能在localhost.这个时候只要在localhost的那台电脑,登入mysql后,更 ...
- flutter 修改
原来用的是tabviewer来写的,但是有点问题. 点到某一个tab,会导致加载前一个tab的数据,看到别人的文章keep tab的做法,写了 tabbar的控件. 我想了一把,直接换成了pagerv ...
- nginx php-fpm启用慢日志slowlog
php-fpm慢日志slowlog设置可以让我们很好的看见哪些php进程速度太慢而导致的网站问题. 可以让我们方便的找到问题的所在. 代码如下 1 vi /data1/server/php-cgi/ ...