对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的new操作符(一)
Dec 25 Javascript
jquery操作下拉列表、文本框、复选框、单选框集合(收藏)
Jan 08 Javascript
JavaScript中双叹号!!作用示例介绍
Sep 21 Javascript
jQuery实现表格行上下移动和置顶效果
Jun 05 Javascript
JavaScript 数组some()和filter()的用法及区别
May 20 Javascript
使用JavaScript解决网页图片拉伸问题(推荐)
Nov 25 Javascript
JS实现仿百度文库评分功能
Jan 12 Javascript
mpvue中配置vuex并持久化到本地Storage图文教程解析
Mar 15 Javascript
vue打包相关细节整理(小结)
Sep 28 Javascript
Vue常用的几个指令附完整案例
Nov 06 Javascript
玩转Koa之koa-router原理解析
Dec 29 Javascript
解决vant框架做H5时踩过的坑(下拉刷新、上拉加载等)
Nov 11 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-fpm配置详解
2014/02/12 PHP
php常用文件操作函数汇总
2014/11/22 PHP
php对二维数组进行相关操作(排序、转换、去空白等)
2015/11/04 PHP
php微信开发接入
2016/08/27 PHP
PHP使用ActiveMQ实现消息队列的方法详解
2019/05/31 PHP
jquery利用event.which方法获取键盘输入值的代码
2011/10/09 Javascript
jquery实现商品拖动选择效果代码(自写)
2013/05/28 Javascript
jquery ajax方式直接提交整个表单核心代码
2013/08/15 Javascript
Jquery中&quot;$(document).ready(function(){ })&quot;函数的使用详解
2013/12/30 Javascript
jquery-syntax动态语法着色示例代码
2014/05/14 Javascript
Javascript+CSS实现影像卷帘效果思路及代码
2014/10/20 Javascript
jQuery实现单击和鼠标感应事件
2015/02/01 Javascript
使用AngularJS创建单页应用的编程指引
2015/06/19 Javascript
js实现无限级树形导航列表效果代码
2015/09/23 Javascript
jQuery实现简单的DIV拖动效果
2016/02/19 Javascript
HTML中setCapture、releaseCapture 使用方法浅析
2016/09/25 Javascript
RequireJS简易绘图程序开发
2016/10/28 Javascript
Vue.js基础指令实例讲解(各种数据绑定、表单渲染大总结)
2017/07/03 Javascript
VUE-Table上绑定Input通过render实现双向绑定数据的示例
2018/08/27 Javascript
iview在vue-cli3如何按需加载的方法
2018/10/31 Javascript
javascript前端和后台进行数据交互方法示例
2020/08/07 Javascript
Node.js 中如何收集和解析命令行参数
2021/01/08 Javascript
python实现连续图文识别
2018/12/18 Python
Python迭代器模块itertools使用原理解析
2019/12/11 Python
python3 正则表达式基础廖雪峰
2020/03/25 Python
Linux安装Python3如何和系统自带的Python2并存
2020/07/23 Python
详解CSS3中字体平滑处理和抗锯齿渲染
2017/03/29 HTML / CSS
捷克时尚网上商店:OTTO
2018/03/15 全球购物
POS解决方案:MUNBYN(热敏打印机、条形码扫描仪)
2020/06/09 全球购物
欢送退休感言
2014/02/08 职场文书
学习十八届三中全会精神实施方案
2014/02/17 职场文书
反邪教宣传工作方案
2014/05/07 职场文书
优秀护士先进事迹
2014/05/08 职场文书
小学生教师节演讲稿
2014/09/03 职场文书
疑《守望先锋2》A测截图泄露 或将推出新模式、新界面
2022/04/03 其他游戏
我的收音机情缘
2022/04/05 无线电