对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 相关文章推荐
Mootools 1.2教程 输入过滤第一部分(数字)
Sep 15 Javascript
javaScript 动态访问JSon元素示例代码
Aug 30 Javascript
jQuery实现内容定时切换效果完整实例
Apr 06 Javascript
15位和18位身份证JS校验的简单实例
Jul 18 Javascript
js实现简单的选项卡效果
Feb 23 Javascript
深入理解在JS中通过四种设置事件处理程序的方法
Mar 02 Javascript
Element Input组件分析小结
Oct 11 Javascript
vue路由传参三种基本方式详解
Dec 09 Javascript
JavaScript 装逼指南(js另类写法)
May 10 Javascript
js实现简单选项卡制作
Aug 05 Javascript
mustache.js实现首页元件动态渲染的示例代码
Dec 28 Javascript
vue 项目@change多个参数传值多个事件的操作
Jan 29 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之第十天
2006/10/09 PHP
php使用pdo连接mssql server数据库实例
2014/12/25 PHP
教你在PHPStorm中配置Xdebug
2015/07/27 PHP
取得一定长度的内容,处理中文
2006/12/20 Javascript
网上抓的一个特效
2007/05/11 Javascript
jQuery 常见操作实现方式和常用函数方法总结
2011/05/06 Javascript
JS实现网页每隔3秒弹出一次对话框的方法
2015/11/09 Javascript
AngularJS使用ngMessages进行表单验证
2015/12/27 Javascript
jQuery EasyUI封装简化操作
2016/09/18 Javascript
jquery实现的回旋滚动效果完整实例【附demo源码下载】
2016/09/20 Javascript
Javascript基础回顾之(二) js作用域
2017/01/31 Javascript
JavaWeb表单及时验证功能在输入后立即验证(含用户类型,性别,爱好...的验证)
2017/06/09 Javascript
NodeJS 实现手机短信验证模块阿里大于功能
2017/06/19 NodeJs
使用Angular CLI生成路由的方法
2018/03/24 Javascript
vue脚手架及vue-router基本使用
2018/04/09 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(上)
2018/04/18 Javascript
微信小程序实现星级评价效果
2018/12/28 Javascript
Vue源码解析之数据响应系统的使用
2019/04/24 Javascript
react+redux仿微信聊天界面
2019/06/21 Javascript
Vue中img的src是动态渲染时不显示的解决
2019/11/14 Javascript
vue监听滚动事件的方法
2020/12/21 Vue.js
python标准日志模块logging的使用方法
2013/11/01 Python
python使用BeautifulSoup与正则表达式爬取时光网不同地区top100电影并对比
2019/04/15 Python
python自动化测试之如何解析excel文件
2019/06/27 Python
python实现微信小程序用户登录、模板推送
2019/08/28 Python
Python-for循环的内部机制
2020/06/12 Python
python 字符串格式化的示例
2020/09/21 Python
css3实例教程 一款纯css3实现的发光屏幕旋转特效
2014/12/07 HTML / CSS
CSS3制作轮播图的一种方法
2019/11/11 HTML / CSS
标记环介质访问控制协议
2016/03/27 面试题
医科大学毕业生自荐信
2014/02/03 职场文书
大学生个人先进事迹材料范文
2014/05/03 职场文书
夫妻忠诚协议书范本
2014/11/17 职场文书
2015年“公民道德宣传日”活动方案
2015/05/06 职场文书
CSS3新特性详解(五):多列columns column-count和flex布局
2021/04/30 HTML / CSS
关于Vue Router的10条高级技巧总结
2021/05/06 Vue.js