对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 相关文章推荐
多个iframe自动调整大小的问题
Sep 18 Javascript
Js+XML 操作
Sep 20 Javascript
JS 强制设为首页的代码
Jan 31 Javascript
javascript 异步页面查询实现代码(asp.net)
May 26 Javascript
用js实现trim()的解决办法
Apr 16 Javascript
jquery toolbar与网页浮动工具条具体实现代码
Jan 12 Javascript
给js文件传参数(详解)
Jul 13 Javascript
基于vue2的table分页组件实现方法
Mar 20 Javascript
JSON在Javascript中的使用(eval和JSON.parse的区别)详细解析
Sep 05 Javascript
解析Vue.js中的组件
Feb 02 Javascript
p5.js入门教程和基本形状绘制
Mar 15 Javascript
js实现拖动缓动效果
Jan 13 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
第4章 数据处理-php数组的处理-郑阿奇
2011/07/04 PHP
使用PHP Socket 编程模拟Http post和get请求
2014/11/25 PHP
php中define用法实例
2015/07/30 PHP
PHP实现的简单对称加密与解密方法实例小结
2017/08/28 PHP
WordPress JQuery处理沙发头像
2009/06/22 Javascript
JS是按值传递还是按引用传递
2015/01/30 Javascript
JavaScript常用脚本汇总(一)
2015/03/04 Javascript
基于javascript代码实现通过点击图片显示原图片
2015/11/29 Javascript
在线引用最新jquery文件的实现方法
2016/08/26 Javascript
模板视图和AngularJS之间冲突的解决方法
2016/11/22 Javascript
微信小程序 高德地图SDK详解及简单实例(源码下载)
2017/01/11 Javascript
vue下跨域设置的相关介绍
2017/08/26 Javascript
微信小程序出现wx.navigateTo页面不跳转问题的解决方法
2017/12/26 Javascript
vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法
2018/01/25 Javascript
微信小程序提交form操作示例
2018/12/30 Javascript
layui点击数据表格添加或删除一行的例子
2019/09/12 Javascript
vue实现表格过滤功能
2019/09/27 Javascript
NUXT SSR初级入门笔记(小结)
2019/12/16 Javascript
Python安装使用命令行交互模块pexpect的基础教程
2016/05/12 Python
python实现聚类算法原理
2018/02/12 Python
python实现机器人卡牌
2019/10/06 Python
使用CSS Grid布局实现网格的流动
2014/12/30 HTML / CSS
Jeep牧马人、切诺基和自由人零配件:4 Wheel Drive Hardware
2017/07/02 全球购物
GANT葡萄牙官方商店:拥有美国运动服传统的生活方式品牌
2018/10/18 全球购物
中间件的定义
2016/08/09 面试题
卫校中专生个人自我评价
2013/09/19 职场文书
初中英语教学反思
2014/01/25 职场文书
民族团结先进个人材料
2014/02/05 职场文书
新闻传媒系求职信范文
2014/04/19 职场文书
党员反对四风思想汇报范文
2014/10/25 职场文书
2015教师个人年度工作总结
2015/10/23 职场文书
Mysql数据库值的添加、修改、删除及清空操作实例
2021/06/20 MySQL
基于PostgreSQL/openGauss 的分布式数据库解决方案
2021/12/06 PostgreSQL
python中对列表的删除和添加方法详解
2022/02/24 Python
Go gRPC进阶教程gRPC转换HTTP
2022/06/16 Golang
win11自动弹出虚拟键盘怎么关闭? Win11关闭虚拟键盘的技巧
2023/01/09 数码科技