对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 相关文章推荐
使用JQUERY Tabs插件宿主IFRAMES
Jan 01 Javascript
javascript+mapbar实现地图定位
Apr 09 Javascript
js有序数组的连接问题
Oct 01 Javascript
jQuery中parents()方法用法实例
Jan 07 Javascript
innerHTML中标签可以换行的方法汇总
Aug 14 Javascript
AngularJs bootstrap搭载前台框架——基础页面
Sep 01 Javascript
在localStorage中存储对象数组并读取的方法
Sep 24 Javascript
JavaScript实现二分查找实例代码
Feb 22 Javascript
基于Datatables跳转到指定页的简单实例
Nov 09 Javascript
最新Javascript程序员面试试题和解题方法
Nov 23 Javascript
基于better-scroll 实现歌词联动功能的代码
May 07 Javascript
原生js实现自定义滚动条
Jan 20 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
CI框架源码阅读,系统常量文件constants.php的配置
2013/02/28 PHP
两种php实现图片上传的方法
2016/01/22 PHP
基于jquery的大众点评,分类导航实现代码
2011/08/23 Javascript
基于jquery的当鼠标滚轮到最底端继续加载新数据思路分享(多用于微博、空间、论坛 )
2011/10/10 Javascript
jQuery实现随意改变div任意属性的名称和值(部分原生js实现)
2013/05/28 Javascript
JavaScript语言核心数据类型和变量使用介绍
2013/08/23 Javascript
ie与ff下的event事件使用介绍
2013/11/25 Javascript
setInterval计时器不准的问题解决方法
2014/05/08 Javascript
JQuery悬停控制图片轮播——代码简单
2015/08/05 Javascript
js实现改进的仿蓝色论坛导航菜单效果代码
2015/09/06 Javascript
JS获取文件大小方法小结
2015/12/08 Javascript
基于jQuery实现照片墙自动播放特效
2017/01/12 Javascript
BootStrap Datetimepicker 汉化的实现代码
2017/02/10 Javascript
JS实现中国公民身份证号码有效性验证
2017/02/20 Javascript
微信小程序switch组件使用详解
2018/01/31 Javascript
react中实现搜索结果中关键词高亮显示
2018/07/31 Javascript
nodejs异步编程基础之回调函数用法分析
2018/12/26 NodeJs
Vue实现点击显示不同图片的效果
2019/08/10 Javascript
python封装对象实现时间效果
2020/04/23 Python
Python复制文件操作实例详解
2015/11/10 Python
将Emacs打造成强大的Python代码编辑工具
2015/11/20 Python
python中defaultdict的用法详解
2017/06/07 Python
Python中用post、get方式提交数据的方法示例
2017/09/22 Python
python利用rsa库做公钥解密的方法教程
2017/12/10 Python
Python+Turtle动态绘制一棵树实例分享
2018/01/16 Python
Python使用pip安装报错:is not a supported wheel on this platform的解决方法
2018/01/23 Python
详解python的ORM中Pony用法
2018/02/09 Python
实例讲解Python3中abs()函数
2019/02/19 Python
Qoo10马来西亚:全球时尚和引领潮流的购物市场
2016/08/25 全球购物
英国音乐设备和乐器商店:Gear4music
2017/10/16 全球购物
日本热销NO.1胶原蛋白冻:Aishitoto爱希特多
2019/06/20 全球购物
Yahoo-PHP面试题1
2016/07/20 面试题
什么是命名空间(NameSpace)
2015/11/24 面试题
基层党员干部四风问题整改方向和措施
2014/09/25 职场文书
教师个人年终总结
2015/02/11 职场文书
2015年语文教师工作总结
2015/05/25 职场文书