对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小知识
Oct 15 Javascript
介绍JavaScript中Math.abs()方法的使用
Jun 14 Javascript
关于JS中二维数组的声明方法
Sep 24 Javascript
D3.js实现直方图的方法详解
Sep 25 Javascript
JS数组操作之增删改查的简单实现
Aug 21 Javascript
js实现点击按钮复制文本功能
Jul 20 Javascript
JS使用setInterval实现的简单计时器功能示例
Apr 19 Javascript
js限制input只能输入有效的数字(第一个不能是小数点)
Sep 28 Javascript
three.js利用卷积法如何实现物体描边效果
Nov 27 Javascript
JS实现简单移动端鼠标拖拽
Jul 23 Javascript
js和jquery判断数据类型的4种方法总结
Aug 28 jQuery
基于Vant UI框架实现时间段选择器
Dec 24 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下载CSS文件中的图片的代码
2013/09/24 PHP
Thinkphp调用Image类生成缩略图的方法
2015/03/07 PHP
基于PHP的微信公众号的开发流程详解
2020/08/07 PHP
JS上传图片前的限制包括(jpg jpg gif及大小高宽)等
2012/12/19 Javascript
javascript中负数算术右移、逻辑右移的奥秘探索
2013/10/17 Javascript
jQuery对象的selector属性用法实例
2014/12/27 Javascript
JavaScript实现向setTimeout执行代码传递参数的方法
2015/04/16 Javascript
JavaScript转换与解析JSON方法实例详解
2015/11/24 Javascript
javascript中的深复制详解及实例分析
2016/12/29 Javascript
jQuery点击弹出层弹出模态框点击模态框消失代码分享
2017/01/21 Javascript
详解node+express+ejs+bootstrap构建项目
2017/09/27 Javascript
JavaScript中严格判断NaN的方法
2018/02/16 Javascript
老生常谈JavaScript获取CSS样式的方法(兼容各浏览器)
2018/09/19 Javascript
vue+elementUI实现表单和图片上传及验证功能示例
2019/05/14 Javascript
Vue 页面权限控制和登陆验证功能的实例代码
2019/06/20 Javascript
p5.js临摹动态图形的方法
2019/10/23 Javascript
JS实现基本的网页计算器功能示例
2020/01/16 Javascript
Python正则表达式分组概念与用法详解
2017/06/24 Python
使用python爬虫实现网络股票信息爬取的demo
2018/01/05 Python
Python shelve模块实现解析
2019/08/28 Python
如何基于Python实现数字类型转换
2020/02/07 Python
python如何代码集体右移
2020/07/20 Python
css3实现文字扫光渐变动画效果的示例
2017/11/07 HTML / CSS
Giglio英国站:意大利奢侈品购物网
2018/03/06 全球购物
Vrbo西班牙:预订您的度假公寓(公寓、乡村房屋…)
2020/04/27 全球购物
运动会跳远加油稿
2014/02/20 职场文书
电话客服专员岗位职责
2014/06/28 职场文书
班级课外活动总结
2014/07/09 职场文书
代办社保委托书范文
2014/10/06 职场文书
关于拾金不昧的感谢信
2015/01/21 职场文书
城南旧事读书笔记
2015/06/29 职场文书
积极心理学课程心得体会
2016/01/22 职场文书
导游词之海南天涯海角
2019/12/05 职场文书
总结Java对象被序列化的两种方法
2021/06/30 Java/Android
MySQL如何快速创建800w条测试数据表
2022/03/17 MySQL
Python实现仓库管理系统
2022/05/30 Python