(三)vue数据绑定及相应的命令
vue数据绑定及相应的命令
- {{ Text }} 双括号进行数据渲染 动态绑定数据
例如:{{message}} data: { return{ message: 'Hello Vue!' } }
2.v-html 输出真正的HTML 会解析HTML标签
例如:
<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>
Using mustaches: <span style="color: red">This should be red.</span>
Using v-html directive: This should be red.
3.v-bind 显示相应的html的属性
例如:
<button v-bind:disabled="isButtonDisabled">Button</button>
isButtonDisabled的值 为false 或者 空啥 disabled的数据值就是false
4 v-once 只渲染元素的组件一次
例如:
这个将不会改变: {{ msg }}
5.v-if 指令将根据表达式的值真假 来插入移除 标签元素
例如:
<p v-if="seen">
现在你看到我了</p>
seen的值为假直接移除元素
v-else指令来表示v-if的else块
6.v-show 另一个根据条件展示元素的选项是v-show
例如:
<h1 v-show="ok">Hello!</h1>
不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS property display。
7.列表渲染:v-for 基于一个数组进行渲染
使用 item(被迭代的数据元素的别名) in items(是源数据组)
注:在v-for中 还可以访问父作用域的东西 还可以显示当前index索引
同时v for 还可以解析对象 将里面的 键名键值索引进行数据的书写
在此位置进行数组的优化 和 修改 比如检索 什么的
在实际书写的时候 直接在计算属性里面进行数据的优化 写个匿名方法进行数据组的操作
8.v-on 指令用于监听DOM的事件
例如:
<a v-on:click="doSomething">...</a>
动态参数: 使用方括号镜像表示JavaScript的表达式作为一个指令参数 就是动态参数事件名
在使用的时候 属性 和 方法 会用的比较多 所以在写法上进行了优化 @ 和 : 绑定事件和属性
(三)vue数据绑定及相应的命令的更多相关文章
- Vue数据绑定
gitHub地址:https://github.com/lily1010/vue_learn/tree/master/lesson04 一 双括号用来数据绑定 (1)写法一: {{message}}, ...
- 浅析vue数据绑定
前言:最近团队需要做一个分享,脚进脑子,不知如何分享.最后想着之前一直想研究一下 vue 源码,今天刚好 "借此机会" 研究一下. 网上研究vue数据绑定的文章已经非常多了,但是自 ...
- Vue数据绑定和响应式原理
Vue数据绑定和响应式原理 当实例化一个Vue构造函数,会执行 Vue 的 init 方法,在 init 方法中主要执行三部分内容,一是初始化环境变量,而是处理 Vue 组件数据,三是解析挂载组件.以 ...
- 「每日一题」有人上次在dy面试,面试官问我:vue数据绑定的实现原理。你说我该如何回答?
关注「松宝写代码」,精选好文,每日一题 时间永远是自己的 每分每秒也都是为自己的将来铺垫和增值 作者:saucxs | songEagle 来源:原创 一.前言 文章首发在「松宝写代码」 2020. ...
- Linux三种关机/重启系统的命令
Linux提供了三种关机/重启系统的命令:shutdown.halt和reboot.这三个命令在一般情况下只有 系统的超级用户(一般是指root)才可以执行.输入没有参数的shutdown命令,两分钟 ...
- ListView 的三种数据绑定方式
ListView 的三种数据绑定方式 1.最原始的绑定方式: public ObservableCollection<object> ObservableObj; public Mai ...
- springMVC学习总结(三)数据绑定
springMVC学习总结(三)数据绑定 一.springMVC的数据绑定,常用绑定类型有: 1.servlet三大域对象: HttpServletRequest HttpServletRespons ...
- Linux(三)——Unix&Linux 的基础命令
Linux(三)--Unix&Linux 的基础命令 快捷键 Ctl-A 光标移动到行首 Ctl-C 终止命令 Ctl-D 注销登录 Ctl-E 光标移动到行尾 Ctl-U 删除光标到行首的所 ...
- vue使用npm run build命令打包
vue使用npm run build命令打包项目 当我们使用vue-cli脚手架完成一个项目的时候,下一步肯定会想要怎么把这个项目放到互联网上或者本地直接打开呢,我们在本地调试的时候只要命令行执行 ...
随机推荐
- MySQL使用ProxySQL实现读写分离
1 ProxySQL简介: ProxySQL是一个高性能的MySQL中间件,拥有强大的规则引擎.官方文档:https://github.com/sysown/proxysql/wiki/下载地址:ht ...
- Visual Studio Code插件安装步骤
1.进入扩展视图视图安装或卸载(快捷键Ctrl+shift+x) 转载于:https://www.cnblogs.com/SakalakaZ/p/7725159.html
- ISA Introduction
介绍一下X86.MIPS.ARM三种指令集: 1. X86指令集 X86指令集是典型的CISC(Complex Instruction Set Computer)指令集. X86指令集外部看起来是CI ...
- 洛谷P3360偷天换日(树形DP)
题目背景 神偷对艺术馆内的名画垂涎欲滴准备大捞一把. 题目描述 艺术馆由若干个展览厅和若干条走廊组成.每一条走廊的尽头不是通向一个展览厅,就 是分为两个走廊.每个展览厅内都有若干幅画,每副画都有一个价 ...
- flink系列-10、flink保证数据的一致性
本文摘自书籍<Flink基础教程> 一.一致性的三种级别 当在分布式系统中引入状态时,自然也引入了一致性问题.一致性实际上是“正确性级别”的另一种说法,即在成功处理故障并恢复之后得到的结果 ...
- 如何使用Golang实现一个API网关
你是否也存在过这样的需求,想要公开一个接口到网络上.但是还得加点权限,否则被人乱调用就不好了.这个权限验证的过程,最好越简单越好,可能只是对比两个字符串相等就够了.一般情况下我们遇到这种需要,就是在函 ...
- Face The Right Way 开关(POJ3276)
描述: \( N 头牛排成了一列.每头牛或者向前或者向后.为了让所有的牛都面向前方,农夫约翰买了 一台自动转向的机器. 这个机器在购买时就必须设定一个数值 K,机器每操作一次恰好使 K 头连续的牛转向 ...
- ASP.Net Core中使用Swagger
我们先简单介绍下什么是Swagger,主要是用来干嘛?? 在Swagger诞生之前,我们通常在开发接口的过程中,需要前后端共同维护一个接口文档,然后大家按照接口文档的规范进行对接.接口文档俨然成了接口 ...
- 1020 Tree Traversals (25分)思路分析 + 满分代码
题目 Suppose that all the keys in a binary tree are distinct positive integers. Given the postorder an ...
- tp5参数传入
把应用配置文件中的url_param_type参数的值修改如下: // 按照参数顺序获取 'url_param_type' => 1, 现在,URL的参数传值方式就变成了严格按照操作方法的变量定 ...