对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 相关文章推荐
JavaScript的面向对象(二)
Nov 09 Javascript
关于JavaScript中string 的replace
Apr 12 Javascript
提交按钮的name='submit'引起的js失效问题及原因
Feb 25 Javascript
使用JavaScript的AngularJS库编写hello world的方法
Jun 23 Javascript
JS自定义选项卡函数及用法实例分析
Sep 02 Javascript
基于jquery实现图片放大功能
May 07 Javascript
Google 地图事件实例讲解
Aug 06 Javascript
jQuery使用DataTable实现删除数据后重新加载功能
Feb 27 Javascript
Angular.JS中指令ng-if的注意事项小结
Jun 21 Javascript
微信小程序开发教程之增加mixin扩展
Aug 09 Javascript
解决vue跨域axios异步通信问题
Apr 17 Javascript
Vue + Element-ui的下拉框el-select获取额外参数详解
Aug 14 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动态生成JavaScript代码
2009/03/09 PHP
PHP中魔术变量__METHOD__与__FUNCTION__的区别
2014/09/29 PHP
Laravel中扩展Memcached缓存驱动实现使用阿里云OCS缓存
2015/02/10 PHP
PHP代码实现表单数据验证类
2015/07/28 PHP
php preg_match的匹配不同国家语言实例
2016/12/29 PHP
为JavaScript类型增加方法的实现代码(增加功能)
2011/12/29 Javascript
js substr支持中文截取函数代码(中文是双字节)
2013/04/17 Javascript
jquery和雅虎的yql服务实现天气预报服务示例
2014/02/08 Javascript
Jquery给基本控件的取值、赋值示例
2014/05/23 Javascript
javascript函数中参数传递问题示例探讨
2014/07/31 Javascript
node.js中的fs.lstatSync方法使用说明
2014/12/16 Javascript
javascript函数式编程程序员的工具集
2015/10/11 Javascript
jquery转盘抽奖功能实现
2015/11/13 Javascript
js实现滚动条滚动到某个位置便自动定位某个tr
2021/01/20 Javascript
Html5 js实现手风琴效果
2020/04/17 Javascript
JavaScript实现大图轮播效果
2017/01/11 Javascript
原生和jQuery的ajax用法详解
2017/01/23 Javascript
从零开始学习Node.js系列教程三:图片上传和显示方法示例
2017/04/13 Javascript
解决jQuery ajax动态新增节点无法触发点击事件的问题
2017/05/24 jQuery
vue实现单选和多选功能
2017/08/11 Javascript
浅谈Angular4实现热加载开发旅程
2017/09/08 Javascript
Node.js在图片模板上生成二维码图片并附带底部文字说明实现详解
2019/08/07 Javascript
基于Layui自定义模块的使用方法详解
2019/09/14 Javascript
微信小程序实现锚点跳转
2020/11/23 Javascript
Vue.js桌面端自定义滚动条组件之美化滚动条VScroll
2020/12/01 Vue.js
[01:03:27]Optic vs VGJ.S 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
[01:14]英雄,所敬略同——2018完美盛典宣传视频
2018/12/05 DOTA
python如何派生内置不可变类型并修改实例化行为
2018/03/21 Python
详解Python 4.0 预计推出的新功能
2019/07/26 Python
python中对_init_的理解及实例解析
2019/10/11 Python
天网面试题
2013/04/07 面试题
课例研修方案
2014/05/31 职场文书
党的群众路线教育实践活动对照检查材料思想汇报
2014/09/19 职场文书
就业意向书范本
2015/05/11 职场文书
深入探讨opencv图像矫正算法实战
2021/05/21 Python
Spring Boot 使用 Spring-Retry 进行重试框架
2022/04/24 Java/Android