对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之更有效率的字符串替换
Aug 02 Javascript
JavaScript中也使用$美元符号来代替document.getElementById
Jun 19 Javascript
基于JQuery的数字改变的动画效果--可用来做计数器
Aug 11 Javascript
JS判断当前日期是否大于某个日期的实现代码
Sep 02 Javascript
js弹出的对话窗口永远保持居中显示
Dec 15 Javascript
JQuery 图片滚动轮播示例代码
Mar 24 Javascript
JavaScript实现的浮动层框架用法实例分析
Oct 10 Javascript
JavaScript如何获取数组最大值和最小值
Nov 18 Javascript
从零学习node.js之简易的网络爬虫(四)
Feb 22 Javascript
JavaScript实现经纬度转换成地址功能
Mar 28 Javascript
Vue2.0权限树组件实现代码
Aug 29 Javascript
Vue组件为什么data必须是一个函数
Jun 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
Cappuccino 卡布其诺咖啡之制作
2021/03/03 冲泡冲煮
PHP加速 eAccelerator配置和使用指南
2009/06/05 PHP
PHP 基于Yii框架中使用smarty模板的方法详解
2013/06/13 PHP
解析PHP中的内存管理,PHP动态分配和释放内存
2013/06/28 PHP
UTF-8正则表达式如何匹配汉字
2015/08/03 PHP
Yii框架页面渲染操作实例详解
2019/07/19 PHP
浅谈laravel中的关联查询with的问题
2019/10/10 PHP
通过继承IHttpHandle实现JS插件的组织与管理
2010/07/13 Javascript
jquery checkbox实现单选小例
2013/11/27 Javascript
Javascript中的匿名函数与封装介绍
2015/03/15 Javascript
使用jquery清空、复位整个输入域
2015/04/02 Javascript
浅谈JavaScript中的Math.atan()方法的使用
2015/06/14 Javascript
jQuery实现类似淘宝网图片放大效果的方法
2015/07/08 Javascript
简单实现的JQuery文本框水印插件
2016/06/14 Javascript
使用Angular.js实现简单的购物车功能
2016/11/21 Javascript
jQuery实现上传图片前预览效果功能
2017/08/03 jQuery
原生js实现针对Dom节点的CRUD操作示例
2019/08/26 Javascript
python实现遍历文件夹修改文件后缀
2018/08/28 Python
实例讲解python中的序列化知识点
2018/10/08 Python
python 图像处理画一个正弦函数代码实例
2019/09/10 Python
Python大数据之从网页上爬取数据的方法详解
2019/11/16 Python
Python3中的f-Strings增强版字符串格式化方法
2020/03/04 Python
Python实现UDP程序通信过程图解
2020/05/15 Python
使用PyQt的QLabel组件实现选定目标框功能的方法示例
2020/05/19 Python
MYPROTEIN澳大利亚官方网站:欧洲运动营养品牌
2019/06/26 全球购物
大学生职业生涯设计书
2014/01/02 职场文书
领导班子个人查摆问题对照检查材料
2014/10/02 职场文书
2015年电话销售工作总结范文
2015/04/20 职场文书
2015年高一班主任工作总结
2015/05/13 职场文书
招商银行收入证明
2015/06/17 职场文书
《花钟》教学反思
2016/02/17 职场文书
合作意向书范本
2019/04/17 职场文书
导游词之北京明十三陵
2019/10/28 职场文书
Spring Boot DevTools 全局配置学习指南
2022/03/31 Java/Android
Python Pytorch查询图像的特征从集合或数据库中查找图像
2022/04/09 Python
vue生命周期钩子函数以及触发时机
2022/04/26 Vue.js