对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 maxlength文本字数限制插件
Apr 16 Javascript
JS模拟键盘打字效果的方法
Aug 05 Javascript
js验证真实姓名与身份证号是否匹配
Oct 13 Javascript
将json转换成struts参数的方法
Nov 08 Javascript
用Vue写一个分页器的示例代码
Apr 22 Javascript
Vue 全家桶实现移动端酷狗音乐功能
Nov 16 Javascript
一次Webpack配置文件的分离实战记录
Nov 30 Javascript
JavaScript键盘事件常见用法实例分析
Jan 03 Javascript
小程序异步问题之多个网络请求依次执行并依次收集请求结果
May 05 Javascript
vue-cli3 取消eslint校验代码的解决办法
Jan 16 Javascript
微信小程序实现购物车功能
Nov 18 Javascript
vue响应式原理与双向数据的深入解析
Jun 04 Vue.js
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 增加了对 .ZIP 文件的读取功能
2006/10/09 PHP
php购物车实现方法
2015/01/03 PHP
Yii1.1框架实现PHP极光推送消息通知功能
2018/09/06 PHP
如何实现JS函数的重载
2006/09/22 Javascript
JavaScript去除空格的几种方法
2006/10/03 Javascript
(function(){})()的用法与优点
2007/03/11 Javascript
jQuery html() in Firefox (uses .innerHTML) ignores DOM changes
2010/03/05 Javascript
处理及遍历XML文档DOM元素属性及方法整理
2013/08/23 Javascript
代码详解javascript模块加载器
2018/03/04 Javascript
简单说说angular.json文件的使用
2018/10/29 Javascript
详解在React项目中安装并使用Less(用法总结)
2019/03/18 Javascript
微信小程序如何修改本地缓存key中单个数据的详解
2019/04/26 Javascript
webpack常用配置总览(小结)
2019/11/18 Javascript
[06:20]2015国际邀请赛第三日top10
2015/08/08 DOTA
[06:53]2018DOTA2国际邀请赛寻真——勇于创新的Vici Gaming
2018/08/14 DOTA
跟老齐学Python之不要红头文件(1)
2014/09/28 Python
Python网络爬虫实例讲解
2016/04/28 Python
python 产生token及token验证的方法
2018/12/26 Python
超简单使用Python换脸实例
2019/03/27 Python
使用pickle存储数据dump 和 load实例讲解
2019/12/30 Python
详解CSS3的perspective属性设置3D变换距离的方法
2016/05/23 HTML / CSS
CSS3制作彩色进度条样式的代码示例分享
2016/06/23 HTML / CSS
印尼太阳百货公司网站:Matahari
2018/02/04 全球购物
美国高品质个性化珠宝销售网站:Jewlr
2018/05/03 全球购物
Tretorn美国官网:瑞典外套和鞋类品牌,抵御风雨
2018/07/19 全球购物
视光学毕业生自荐书范文
2014/02/13 职场文书
影视广告专业求职信
2014/09/02 职场文书
个人反四风对照检查材料思想汇报
2014/09/23 职场文书
群众路线个人整改方案
2014/10/25 职场文书
劳资员岗位职责
2015/02/13 职场文书
保研导师推荐信
2015/03/25 职场文书
小学推普周活动总结
2015/05/07 职场文书
证婚人致辞精选
2015/07/28 职场文书
奖学金主要事迹范文
2015/11/04 职场文书
个人向公司借款协议书
2016/03/19 职场文书
MYSQL 的10大经典优化案例场景实战
2021/09/14 MySQL