对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 相关文章推荐
jQuery 1.4 15个你应该知道的新特性(译)
Jan 24 Javascript
JQuery的Alert消息框插件使用介绍
Oct 09 Javascript
javascript克隆对象深度介绍
Nov 20 Javascript
javascript日期对象格式化为字符串的实现方法
Jan 14 Javascript
常用jQuery选择器总结
Jul 11 Javascript
常用的jQuery前端技巧收集
Dec 24 Javascript
js实现类似菜单风格的TAB选项卡效果代码
Aug 28 Javascript
基于jQuery实现返回顶部实例代码
Jan 01 Javascript
学习node.js 断言的使用详解
Mar 18 Javascript
jquery+php后台实现省市区联动功能示例
May 23 jQuery
JS实现简单tab选项卡切换
Oct 25 Javascript
uni-app实现获取验证码倒计时功能
Nov 01 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
全国FM电台频率大全 - 17 湖北省
2020/03/11 无线电
php缩小png图片不损失透明色的解决方法
2013/12/25 PHP
php判断正常访问和外部访问的示例
2014/02/10 PHP
PHP程序漏洞产生的原因分析与防范方法说明
2014/03/06 PHP
PHP中addslashes()和stripslashes()实现字符串转义和还原用法实例
2016/01/07 PHP
用PHP去掉文件头的Unicode签名(BOM)方法
2017/06/22 PHP
php连接MSsql server的五种方法总结
2018/03/04 PHP
PHP生成图表pChart的示例解析
2020/07/31 PHP
Mozilla中显示textarea中选择的文字
2006/09/07 Javascript
div模拟滚动条效果示例代码
2013/10/16 Javascript
JavaScript删除指定子元素代码实例
2015/01/13 Javascript
jQuery学习笔记之创建DOM元素
2015/01/19 Javascript
移动端JQ插件hammer使用详解
2015/07/03 Javascript
详细分析Javascript中创建对象的四种方式
2016/08/17 Javascript
Nodejs+Socket.io实现通讯实例代码
2017/02/13 NodeJs
js实现做通讯录的索引滑动显示效果和滑动显示锚点效果
2017/02/18 Javascript
jQuery实现鼠标点击处心形漂浮的炫酷效果示例
2018/04/12 jQuery
详解为生产环境编译Angular2应用的方法
2018/12/10 Javascript
js中async函数结合promise的小案例浅析
2019/04/14 Javascript
JS函数动态传递参数的方法分析【基于arguments对象】
2019/06/05 Javascript
解决Vue中的生命周期beforeDestory不触发的问题
2020/07/21 Javascript
vue 内联样式style中的background用法说明
2020/08/05 Javascript
Vue 数据响应式相关总结
2021/01/28 Vue.js
[03:24][TI9纪实] Dota奶爸
2019/08/22 DOTA
Python模拟百度登录实例详解
2016/01/20 Python
Python中遍历字典过程中更改元素导致异常的解决方法
2016/05/12 Python
浅谈flask源码之请求过程
2018/07/26 Python
flask框架json数据的拿取和返回操作示例
2019/11/28 Python
python3 图片 4通道转成3通道 1通道转成3通道 图片压缩实例
2019/12/03 Python
详解CSS3中使用gradient实现渐变效果的方法
2015/08/18 HTML / CSS
入党积极分子对十八届四中全会期盼的思想汇报
2014/10/17 职场文书
门市房租房协议书
2014/12/04 职场文书
56句经典英文座右铭
2019/08/09 职场文书
Java面试题冲刺第十五天--设计模式
2021/08/07 面试题
MyBatis自定义SQL拦截器示例详解
2021/10/24 Java/Android
使用Django框架创建项目
2022/06/10 Python