对vuejs的v-for遍历、v-bind动态改变值、v-if进行判断的实例讲解


Posted in Javascript onAugust 27, 2018

最近学了点vuejs,把学的东西记录下来方便你我他。

vuejs的官方文档:https://vuejs.org/v2/api/ (还是要习惯看官方文档啊同志们~)

1、 v-for进行遍历

比如我这里想遍历videos里的所有元素,那么我输入

<div v-for="v in videos">

<a :href="v" rel="external nofollow" >啦啦啦</a>

</div>

注意href前面要加冒号“:”,表示这是在进行一次遍历

下面是我运行过的一个复杂一点的代码:

对vuejs的v-for遍历、v-bind动态改变值、v-if进行判断的实例讲解

2、v-bind动态改变值

我有一堆视频的链接,想让鼠标移上去的时候显示视频的名字,那么我用title属性,但是我想让title属性动态变化,

那么就需要v-bing了

<a href="#" rel="external nofollow" v-bind:title="video">啦啦啦</a>

v-bind:可以用来动态改变链接的titile的值,这样鼠标放上去之后会显示title中的变量

3、v-if ////v-else进行判断

比如我这里判断abcd是否为空:

<div v-if="abcd">

 you can see me

</div>

以上这篇对vuejs的v-for遍历、v-bind动态改变值、v-if进行判断的实例讲解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Ajax一统天下之Dojo整合篇
Mar 24 Javascript
javascript学习笔记(十) js对象 继承
Jun 19 Javascript
使用jquery.validate自定义方法实现&quot;手机号码或者固话至少填写一个&quot;的逻辑验证
Sep 01 Javascript
JS实现的4种数字千位符格式化方法分享
Mar 02 Javascript
javascript实现的字符串与十六进制表示字符串相互转换方法
Jul 17 Javascript
DOM事件探秘篇
Feb 15 Javascript
详解如何让InstantClick兼容MathJax、百度统计等
Sep 12 Javascript
bootstrap fileinput插件实现预览上传照片功能
Jan 23 Javascript
使用Angular CLI从蓝本生成代码详解
Mar 24 Javascript
详解关于vue2.0工程发布上线操作步骤
Sep 27 Javascript
cdn模式下vue的基本用法详解
Oct 07 Javascript
angular inputNumber指令输入框只能输入数字的实现
Dec 03 Javascript
Vuex 在Vue 组件中获得Vuex 状态state的方法
Aug 27 #Javascript
JS实现匀速与减速缓慢运动的动画效果封装示例
Aug 27 #Javascript
vue展示dicom文件医疗系统的实现代码
Aug 27 #Javascript
vue中子组件的methods中获取到props中的值方法
Aug 27 #Javascript
最适应的vue.js的form提交涉及多种插件【推荐】
Aug 27 #Javascript
vue里面v-bind和Props 利用props绑定动态数据的方法
Aug 27 #Javascript
vue.js中toast用法及使用toast弹框的实例代码
Aug 27 #Javascript
You might like
Bo-Blog专用的给Windows服务器的IIS Rewrite程序
2007/08/26 PHP
Codeigniter检测表单post数据的方法
2015/03/21 PHP
PHP在同一域名下两个不同的项目做独立登录机制详解
2017/09/22 PHP
PDO::query讲解
2019/01/29 PHP
jQuery 使用手册(二)
2009/09/23 Javascript
js原生appendChild的bug解决心得分享
2013/07/01 Javascript
JavaScript清空数组元素的两种方法简单比较
2015/07/10 Javascript
浅析jquery与checkbox的checked属性的问题
2016/04/27 Javascript
一个炫酷的Bootstrap导航菜单
2016/12/28 Javascript
基于Bootstrap 3 JQuery及RegExp的表单验证功能
2017/02/16 Javascript
Ionic项目中Native Camera的使用方法
2017/06/07 Javascript
Vue学习笔记进阶篇之vue-cli安装及介绍
2017/07/18 Javascript
JavaScript模拟文件拖选框样式v1.0的实例
2017/08/04 Javascript
AngularJS 中ui-view传参的实例详解
2017/08/25 Javascript
ajax+node+request爬取网络图片的实例(宅男福利)
2017/08/28 Javascript
详解vue mixins和extends的巧妙用法
2017/12/20 Javascript
vue移动端轻量级的轮播组件实现代码
2018/07/12 Javascript
vuex直接赋值的三种方法总结
2018/09/16 Javascript
JS去除字符串最后的逗号实例分析【四种方法】
2019/06/20 Javascript
Layui实现数据表格中鼠标悬浮图片放大效果,离开时恢复原图的方法
2019/09/11 Javascript
Python的Django框架中的数据库配置指南
2015/07/17 Python
对python中的xlsxwriter库简单分析
2018/05/04 Python
在python中只选取列表中某一纵列的方法
2018/11/28 Python
Python 普通最小二乘法(OLS)进行多项式拟合的方法
2018/12/29 Python
如何在 Django 模板中输出 &quot;{{&quot;
2020/01/24 Python
Python无头爬虫下载文件的实现
2020/04/02 Python
Python+Xlwings 删除Excel的行和列
2020/12/19 Python
英国最大的电子产品和家电零售企业:Currys PC World
2016/09/24 全球购物
英国的领先快速时尚零售商:In The Style
2019/03/25 全球购物
西安夏日科技有限公司Java笔试题
2013/01/11 面试题
税务专业毕业生自荐信
2013/11/10 职场文书
写给老师的保证书
2015/05/09 职场文书
边城读书笔记
2015/06/29 职场文书
禁毒心得体会范文
2016/01/15 职场文书
建房合同协议书
2016/03/21 职场文书
解决Mysql多行子查询的使用及空值问题
2022/01/22 MySQL