对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 相关文章推荐
在Ajax中使用Flash实现跨域数据读取的实现方法
Dec 02 Javascript
基于Jquery的$.cookie()实现跨越页面tabs导航实现代码
Mar 03 Javascript
jquery选择器之属性过滤选择器详解
Jan 27 Javascript
jquery动画效果学习笔记(8种效果)
Nov 13 Javascript
vue-resource 拦截器使用详解
Feb 21 Javascript
js图片轮播插件的封装
Jul 21 Javascript
解决jquery appaend元素中id绑定事件失效的问题
Sep 12 jQuery
Layui组件Table绑定行点击事件和获取行数据的方法
Aug 19 Javascript
使用RxJS更优雅地进行定时请求详析
Jun 02 Javascript
微信小程序使用npm包的方法步骤
Aug 13 Javascript
解决layer.open后laydate失效的问题
Sep 06 Javascript
Vuex modules模式下mapState/mapMutations的操作实例
Oct 17 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
农民C键的运用技巧
2020/03/04 星际争霸
PHP中的switch语句的用法实例详解
2015/10/21 PHP
PHP接口并发测试的方法(推荐)
2016/12/15 PHP
document.documentElement &amp;&amp; document.documentElement.scrollTop
2007/12/01 Javascript
showModalDialog在谷歌浏览器下会返回Null的解决方法
2013/11/27 Javascript
实例分析js和C#中使用正则表达式匹配a标签
2014/11/26 Javascript
js 弹出对话框(遮罩)透明,可拖动的简单实例
2016/07/11 Javascript
javascript 判断当前浏览器版本并判断ie版本
2017/02/17 Javascript
详解Weex基于Vue2.0开发模板搭建
2017/03/20 Javascript
收藏AngularJS中最重要的核心功能
2017/07/09 Javascript
IScroll那些事_当内容不足时下拉刷新的解决方法
2017/07/18 Javascript
详解react关于事件绑定this的四种方式
2018/03/09 Javascript
在vue使用clipboard.js进行一键复制文本的实现示例
2019/01/15 Javascript
JS实现二维数组元素的排列组合运算简单示例
2019/01/28 Javascript
JS实现的杨辉三角【帕斯卡三角形】算法示例
2019/02/26 Javascript
详解使用WebPack搭建React开发环境
2019/08/06 Javascript
Layui表格监听行单双击事件讲解
2019/11/14 Javascript
Vue切换组件实现返回后不重置数据,保留历史设置操作
2020/07/21 Javascript
vue-router重写push方法,解决相同路径跳转报错问题
2020/08/07 Javascript
Python升级导致yum、pip报错的解决方法
2017/09/06 Python
Sanic框架基于类的视图用法示例
2018/07/18 Python
django商品分类及商品数据建模实例详解
2020/01/03 Python
基于TensorFlow的CNN实现Mnist手写数字识别
2020/06/17 Python
如何在Anaconda中打开python自带idle
2020/09/21 Python
Python 实现3种回归模型(Linear Regression,Lasso,Ridge)的示例
2020/10/15 Python
Html5 video标签视频的最佳实践
2020/02/26 HTML / CSS
TUMI澳大利亚网站:美国旅行箱包品牌
2017/03/27 全球购物
自主招生自荐信格式
2013/12/03 职场文书
质量安全标语
2014/06/07 职场文书
继承权公证书范本
2015/01/23 职场文书
小学教师节活动总结
2015/03/20 职场文书
2015年大学生社会实践评语
2015/03/26 职场文书
民间借贷纠纷答辩状
2015/08/03 职场文书
公司出差管理制度范本
2015/08/05 职场文书
Python使用scapy模块发包收包
2021/05/07 Python
mysql 直接拷贝data 目录下文件还原数据的实现
2021/07/25 MySQL