vue数据绑定方式:
1,{{ }}
2,v-text
3,v-html
前两种接受普通变量,第三种绑定带有标签的内容,但是严禁使用,这个会有 XSS危险,(将字符串解析成源代码)
4,v-bind:title=‘msg’ //绑定属性 可缩写 :title='msg'
5,v-on //绑定事件 可缩写 @click='fun1'
在“data”属性中加个属性
“methods":{
"fun1":function(){
//fun1事件执行代码
}
}
6,v-show //值为真时显示,否则不显示
7,v-if //值为真时显示,否则不显示
8,v-else //值为真时显示,否则不显示,可以不加条件,表示剩余情况
9,v-else //值为真时显示,否则不显示,可以不加条件,表示剩余情况
10,v-for //用于遍历循环,1.0版本可以识别$index,$first,$last,$medle,2.0版本不行,可以用v-for=“(u,index) in user”或
第三个参数为索引:
|
<div v-for="(value, key, index) in object">
{{ index }}. {{ key }}: {{ value }}
</div>
|
11,v-model //绑定表单元素,用表单时必须要加此指令
12,v-pre //忽略由此修饰的代码,就是不解析把它原样显示出来,还可以加快页面加载速度
13,v-cloak //和ng-cloak一样,防止{{}}在页面加载时显示出来,等页面加载完成后再显示出来花括号里的内容
14,v-once //一次事件绑定 <div>{{msg}}</div> 只显示一次,后面数据改变了,此部分也不会在改变了
vue数据绑定方式:的更多相关文章
- 浅析vue数据绑定
前言:最近团队需要做一个分享,脚进脑子,不知如何分享.最后想着之前一直想研究一下 vue 源码,今天刚好 "借此机会" 研究一下. 网上研究vue数据绑定的文章已经非常多了,但是自 ...
- 17: VUE数据绑定 与 Object.defineProperty
VUE数据绑定原理:https://segmentfault.com/a/1190000006599500?utm_source=tag-newest Object.defineProperty(): ...
- 「每日一题」有人上次在dy面试,面试官问我:vue数据绑定的实现原理。你说我该如何回答?
关注「松宝写代码」,精选好文,每日一题 时间永远是自己的 每分每秒也都是为自己的将来铺垫和增值 作者:saucxs | songEagle 来源:原创 一.前言 文章首发在「松宝写代码」 2020. ...
- UWP中新加的数据绑定方式x:Bind分析总结
UWP中新加的数据绑定方式x:Bind分析总结 0x00 UWP中的x:Bind 由之前有过WPF开发经验,所以在学习UWP的时候直接省略了XAML.数据绑定等几个看着十分眼熟的主题.学习过程中倒是也 ...
- Vue数据绑定
gitHub地址:https://github.com/lily1010/vue_learn/tree/master/lesson04 一 双括号用来数据绑定 (1)写法一: {{message}}, ...
- ListView 的三种数据绑定方式
ListView 的三种数据绑定方式 1.最原始的绑定方式: public ObservableCollection<object> ObservableObj; public Mai ...
- VUE组件 之 Toast (Vue.extend 方式)
一.效果图 二.说明 这类提示框组件我们通常都会直接在 JS 代码中进行调用.像下面这样: this.$toast('别点啦,到头啦!') 但看到网上大多数还是通过 component 方式实现的, ...
- Vue数据绑定和响应式原理
Vue数据绑定和响应式原理 当实例化一个Vue构造函数,会执行 Vue 的 init 方法,在 init 方法中主要执行三部分内容,一是初始化环境变量,而是处理 Vue 组件数据,三是解析挂载组件.以 ...
- WPF 实现跑马灯效果的Label控件,数据绑定方式实现
原文:WPF 实现跑马灯效果的Label控件,数据绑定方式实现 项目中需要使用数据绑定的方式实现跑马灯效果的Label,故重构了Label控件:具体代码如下 using System; using S ...
随机推荐
- [洛谷P4980]【模板】Polya定理
题目大意:给一个$n$个点的环染色,有$n$中颜色,问有多少种涂色方案是的旋转后本质不同 题解:$burnside$引理:$ans=\dfrac1{|G|}\sum\limits_{g\in G}A_ ...
- BZOJ4889 & 洛谷3759:[TJOI2017]不勤劳的图书管理员——题解
https://www.lydsy.com/JudgeOnline/problem.php?id=4889 https://www.luogu.org/problemnew/show/P3759 加里 ...
- 牛客网 Wannafly挑战赛27 蓝魔法师
蓝魔法师 链接: https://www.nowcoder.com/acm/contest/215/C 来源:牛客网 题目描述 "你,你认错人了.我真的,真的不是食人魔."--蓝魔 ...
- 《python核心编程》--读书笔记 第21章 数据库编程
准备:今天拿笔记本装了mysql,这样就能在不同地方用其他电脑远程访问同一个数据库了. python安装MySQLdb模块:http://www.codegood.com/downloads. 21. ...
- ACE日志系统
引用于:http://blog.csdn.net/focusonace/article/details/3108873 http://peirenlei.iteye.com/blog/305036 介 ...
- unix awk手册读书笔记
http://note.youdao.com/noteshare?id=9ac76eb63a53ac000f7814454642d2b0
- c++模板类编译错误
最近想写一个c++模板类,实现一个有向图.依据惯例,类在头文件中声明,类的实现写在源文件中.可是编译的时候出现了如下错误: undefined reference to 通过谷歌发现,这是一个很常见的 ...
- C语言双链表遍历,插入,删除
#include<stdio.h> #include<stdlib.h> #include <string.h> #define bzero(a, b) memse ...
- [LeetCode] 数组的最长连续数, O(n)解法
Longest Consecutive Sequence Given an unsorted array of integers, find the length of the longest con ...
- 浅谈移动端三大viewport
我们通常在写移动端页面时,往往都会在html页面中加入这样一段话 <meta name="viewport" content="width=device-width ...