对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与CSS复习(二)
Jun 29 Javascript
JS比较两个时间大小的简单示例代码
Dec 20 Javascript
学习javascript面向对象 javascript实现继承的方式
Jan 04 Javascript
轻松实现js图片预览功能
Jan 18 Javascript
javascript嵌套函数和在函数内调用外部函数的区别分析
Jan 31 Javascript
JavaScript利用HTML DOM进行文档操作的方法
Mar 28 Javascript
Bootstrap源码解读模态弹出框(11)
Dec 28 Javascript
详解js中==与===的区别
Jan 08 Javascript
详解vue-cli中模拟数据的两种方法
Jul 03 Javascript
Node.js API详解之 repl模块用法实例分析
May 25 Javascript
vue实现下拉菜单树
Oct 22 Javascript
vue实现简易音乐播放器
Aug 14 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中读取和写入WORD文档的代码
2008/04/09 PHP
async和DOM Script文件加载比较
2014/07/20 PHP
PHP 读取大文件并显示的简单实例(推荐)
2016/08/12 PHP
对象特征检测法判断浏览器对javascript对象的支持
2009/07/25 Javascript
js 延迟加载 改变JS的位置加快网页加载速度
2012/12/11 Javascript
JS弹出窗口代码大全(详细整理)
2012/12/21 Javascript
异步动态加载JS并运行(示例代码)
2013/12/13 Javascript
浅谈jQuery中height与width
2015/07/06 Javascript
Windows下用PyCharm和Visual Studio开始Python编程
2015/10/26 Javascript
jQuery Easy UI中根据第一个下拉框选中的值设置第二个下拉框是否可以编辑
2016/11/29 Javascript
Angular2实现自定义双向绑定属性
2017/03/22 Javascript
nodejs个人博客开发第一步 准备工作
2017/04/12 NodeJs
jquery实现倒计时小应用
2017/09/19 jQuery
js实现简单数字变动效果
2017/11/06 Javascript
vue实现div单选多选功能
2020/07/16 Javascript
零基础学Python(一)Python环境安装
2014/08/20 Python
Python判断两个list是否是父子集关系的实例
2018/05/04 Python
python中sys.argv函数精简概括
2018/07/08 Python
利用pandas读取中文数据集的方法
2018/07/25 Python
python安装pil库方法及代码
2019/06/25 Python
在python中用url_for构造URL的方法
2019/07/25 Python
Python运行异常管理解决方案
2020/03/09 Python
python 瀑布线指标编写实例
2020/06/03 Python
Python3爬虫ChromeDriver的安装实例
2021/02/06 Python
PyCharm 光标变成黑块的解决方式
2021/02/06 Python
新西兰最大的连锁超市:Countdown
2020/06/04 全球购物
《盲人摸象》教学反思
2014/02/16 职场文书
承诺书怎么写
2014/03/26 职场文书
上课不认真检讨书
2014/09/17 职场文书
党的群众路线教育实践活动批评与自我批评发言稿
2014/10/16 职场文书
英语复习计划
2015/01/19 职场文书
小学体育队列队形教学反思
2016/02/16 职场文书
一个成功的互联网创业项目,必须满足这些要求
2019/08/23 职场文书
Nginx tp3.2.3 404问题解决方案
2021/03/31 Servers
多表查询、事务、DCL
2021/04/05 MySQL
java实现自定义时钟并实现走时功能
2022/06/21 Java/Android