对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 相关文章推荐
会自动逐行上升的文本框
Jun 30 Javascript
js有序数组的连接问题
Oct 01 Javascript
jQuery的attr与prop使用介绍
Oct 10 Javascript
简单谈谈jQuery(function(){})与(function(){})(jQuery)
Dec 19 Javascript
JavaScript编程中布尔对象的基本使用
Oct 25 Javascript
jQuery手动点击实现图片轮播特效
Apr 20 Javascript
瀑布流的实现方式(原生js+jquery+css3)
Jun 28 Javascript
javascript 判断是否是微信浏览器的方法
Oct 09 Javascript
etmvc+jQuery EasyUI+combobox多值操作实现角色授权实例
Nov 09 Javascript
详解JS异步加载的三种方式
Mar 07 Javascript
jQuery中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
Apr 04 jQuery
VUE实现强制渲染,强制更新
Oct 29 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
如何判断php数组的维度
2013/06/10 PHP
ThinkPHP like模糊查询,like多匹配查询,between查询,in查询,一般查询书写方法
2018/09/26 PHP
[原创]用javascript实现检测指定目录是否存在的方法
2008/01/12 Javascript
js setTimeout 参数传递使用介绍
2013/08/13 Javascript
基于javascript实现listbox左右移动
2016/01/29 Javascript
JS两种类型的表单提交方法实例分析
2016/11/28 Javascript
JavaScript定时器setTimeout()和setInterval()详解
2017/08/18 Javascript
jQuery结合jQuery.cookie.js插件实现换肤功能示例
2017/10/14 jQuery
通过一个简单的例子学会vuex与模块化
2017/11/22 Javascript
vue采用EventBus实现跨组件通信及注意事项小结
2018/06/14 Javascript
30分钟精通React今年最劲爆的新特性——React Hooks
2019/03/11 Javascript
layer.alert自定义关闭回调事件的方法
2019/09/27 Javascript
原生javascript如何实现共享onload事件
2020/07/03 Javascript
Vue+axios封装请求实现前后端分离
2020/10/23 Javascript
使用Python编写一个简单的tic-tac-toe游戏的教程
2015/04/16 Python
Python中垃圾回收和del语句详解
2018/11/15 Python
python pexpect ssh 远程登录服务器的方法
2019/02/14 Python
Python socket模块实现的udp通信功能示例
2019/04/10 Python
常用python爬虫库介绍与简要说明
2020/01/25 Python
Python操作PostgreSql数据库的方法(基本的增删改查)
2020/12/29 Python
Matplotlib animation模块实现动态图
2021/02/25 Python
阿里旅行:飞猪
2017/01/05 全球购物
波兰快递服务:Globkurier.pl
2019/11/08 全球购物
什么是类的返射机制
2016/02/06 面试题
成人大专自我鉴定范文
2013/10/19 职场文书
元旦晚会上单位领导演讲稿
2014/01/05 职场文书
化学教师教学反思
2014/01/17 职场文书
初三学习决心书
2014/03/11 职场文书
高三励志标语
2014/06/05 职场文书
中学生关于梦想的演讲稿
2014/08/22 职场文书
共青团员自我评价范文
2014/09/14 职场文书
物业保洁员管理制度
2015/08/05 职场文书
解析高可用Redis服务架构分析与搭建方案
2021/06/20 Redis
基于MySql验证的vsftpd虚拟用户
2021/11/07 MySQL
清空 Oracle 安装记录并重新安装
2022/04/26 Oracle
Golang 入门 之url 包
2022/05/04 Golang