对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 相关文章推荐
区分JS中的undefined,null,&quot;&quot;,0和false
Mar 08 Javascript
javascript while语句和do while语句的区别分析
Dec 08 Javascript
JQuery与Ajax常用代码实现对比
Oct 03 Javascript
解析DHTML,JavaScript,DOM,BOM以及WEB标准的描述
Jun 19 Javascript
原生JavaScript实现Ajax的方法
Apr 07 Javascript
关于cookie的初识和运用(js和jq)
Apr 07 Javascript
js+div+css下拉导航菜单完整代码分享
Dec 28 Javascript
jQuery插件form-validation-engine正则表达式操作示例
Feb 09 Javascript
原生JS实现的雪花飘落动画效果
May 03 Javascript
pm2启动ssr失败的解决方法
Jun 29 Javascript
jquery实现简易验证插件封装
Sep 13 jQuery
vue生命周期钩子函数以及触发时机
Apr 26 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
MVC模式的PHP实现
2006/10/09 PHP
php中取得文件的后缀名?
2012/02/20 PHP
php转换颜色为其反色的方法
2015/04/27 PHP
php单链表实现代码分享
2016/07/04 PHP
jQuery操作select的实例代码
2012/06/14 Javascript
javascript之典型高阶函数应用介绍
2013/01/10 Javascript
百度判断手机终端并自动跳转js代码及使用实例
2014/06/11 Javascript
详谈jQuery操纵DOM元素属性 attr()和removeAtrr()方法
2015/01/22 Javascript
使用Sticker.js实现贴纸效果
2015/01/28 Javascript
javascript实现rgb颜色转换成16进制格式
2015/07/10 Javascript
详解XMLHttpRequest(一)同步请求和异步请求
2016/09/14 Javascript
javascript中异常处理案例(推荐)
2016/10/03 Javascript
使用javaScript实现鼠标拖拽事件
2020/04/03 Javascript
深入理解Vue 的钩子函数
2018/09/05 Javascript
vue 页面跳转的实现方式
2021/01/12 Vue.js
利用Python中unittest实现简单的单元测试实例详解
2017/01/09 Python
Python模块文件结构代码详解
2018/02/03 Python
Python简单获取网卡名称及其IP地址的方法【基于psutil模块】
2018/05/24 Python
python 通过麦克风录音 生成wav文件的方法
2019/01/09 Python
在Python中等距取出一个数组其中n个数的实现方式
2019/11/27 Python
在flask中使用python-dotenv+flask-cli自定义命令(推荐)
2020/01/05 Python
Python -m参数原理及使用方法解析
2020/08/21 Python
利用Python实现学生信息管理系统的完整实例
2020/12/30 Python
马来西亚在线健康商店:Medipal Malaysia
2020/04/13 全球购物
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢? 是用==还是equals()? 它们有何区别?用contains来区分是否有重复的对象。还是都不用
2013/07/30 面试题
英语自我评价范文
2014/01/24 职场文书
加拿大留学自荐信
2014/01/28 职场文书
办公设备采购方案
2014/03/16 职场文书
家长通知书教师评语
2014/04/17 职场文书
学生会竞选演讲稿学习部
2014/08/25 职场文书
专题组织生活会发言材料
2014/10/17 职场文书
有限公司股东合作协议书
2014/10/29 职场文书
食品药品安全责任书
2015/05/11 职场文书
HTML5 新增内容和 API详解
2021/11/17 HTML / CSS
TypeScript 使用 Tuple Union 声明函数重载
2022/04/07 Javascript
Win11 KB5015814遇安装失败 影响开始菜单性能解决方法
2022/07/15 数码科技