一、v-for 的用法

　　循环指令，可以遍历 Number、String、Object、Array；

  • 循环数字、字符串：有2个参数，分别是value和索引值；

  • 循环对象：有3个参数，分别是 属性值、属性名、索引值；

  • 循环数组对象：有2个参数，分别是 对象和索引值；

  • 索引值和属性名可以省略不写。

 <h4>遍历数字：</h4>

 <div v-for="(value,idx) in forData1">

      <span>值{{value}} --- 索引值{{idx}}</span>

 </div>

 <h4>遍历字符串：</h4>

 <div v-for="(value,idx) in forData2">

      <span>值{{value}} --- 索引值{{idx}}</span>

 </div>

 <h4>遍历对象：</h4>

 <div v-for="(item,key,idx) in forData3">

      <span>属性值{{item}} --- 属性名{{key}} --- 索引值{{idx}}</span>

 </div>

 <h4>遍历数组对象(嵌套循环)：</h4>

 <div v-for="(item,idx) in forData4" >

      <span>对象{{item}} --- 索引值{{idx}}</span>

      <div v-for="(i,key) in item">

         <span>{{i}}---{{key}}</span>

      </div>

 </div>

 new Vue({

     el: '#app',

     data: {

         forData1:3,

         forData2:'abcd',

         forData3:{name:'xixi',age:18},

         forData4:[{name:'张飞',age:38},{name:'武松',age:48}]

     }

 })

运行结果：       

 二、v-bind绑定class的几种写法

　　绑定属性；

　　缩写： v-bind:class=" "  --->  :class=" "

　　1. 常见写法

<div :class="classA"></div>

　　2. 数组语法

<div :class="[classA,classB]"></div>

　　3. 对象语法（绑定布尔值、属性，当判断条件比较复杂可以绑定方法）

<div :class="{'redFont':true,'blueBorder':ifhasBorder，'bigSize':changeSize()}"></div>

　　vue实例化配置：

<script src="./vue.js"></script>

<script>

      var vm = new Vue({

         el: '#app',

         data: {

            classA:'redFont',

            classB:'blueBorder',

            ifhasBorder:false

         },

         methods:{

              changeSize:function(){

                  return false;

              }

         }

      })

</script>

运行结果：   

 三、简单应用：tab标签切换

　　结合 v-for 、v-bind 以及 v-show 指令，实现简单的tab标签和内容同步切换，（样式引用bootstrap.css）。

<!DOCTYPE html>

<html lang="en">

<head>

   <meta charset="UTF-8">

   <meta name="viewport" content="width=device-width, initial-scale=1.0">

   <meta http-equiv="X-UA-Compatible" content="ie=edge">

   <title>Document</title>

   <link rel="stylesheet" href="./bootstrap.css">

</head>

<body>

   <div id="app">

      <ul class="nav nav-tabs">

         <li class="nav-item" v-for="(item,idx) in tabs">

            <a :class="{'nav-link':true,active:idx===activeIndex}" href="#" @click="changeIdx(idx)">{{item}}</a>

         </li>

      </ul>

      <div v-for="(item,idx) in contents">

         <div v-show="idx===activeIndex" style="padding:10px;">{{item}}</div>

      </div>

   </div>

   <script src="./vue.js"></script>

   <script>

      var vm = new Vue({

         el: '#app',

         data: {

            tabs: ["水果", "玩具", "人名"],

            contents: ['西瓜葡萄大苹果', '积木拼图小火车', '大雄小熊小小明'],

            activeIndex:0

         },

         methods:{

            changeIdx:function(idx){

               this.activeIndex = idx;

            }

         }

      })

   </script>

</body>

</html>

运行结果：  

Vue指令：v-for的用法；v-bind绑定class的几种写法；tab标签切换的更多相关文章

  1. 无废话Android之常见adb指令、电话拨号器、点击事件的4种写法、短信发送器、Android 中各种布局（1）

    1.Android是什么 手机设备的软件栈,包括一个完整的操作系统.中间件.关键的应用程序,底层是linux内核,安全管理.内存管理.进程管理.电源管理.硬件驱动 2.Dalvik VM 和 JVM ...

  2. Vue el与data的两种写法 && Object.defineProperty方法

    1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 & ...

  3. 一个能拖动，能调整大小，能更新bind值的vue指令-vuedragx

    一. 背景说明 开发一个可自定义组件化门户配置页面,期间采用了vue框架作为前端视图引擎,作为一个刚入手vue的萌新,开发第一个功能就遇到了拦路虎.需要一个拖动并且可改变大小的容器盒子.当时查看vue ...

  4. vue指令用法

    vue指令 指令式带有 v- 前缀的特殊特性v-text和v-html都属于指令将数据和dom做关联,当表达式的值改变时,响应式地作用在视图 解决大胡子语法闪烁案例 [v-cloak] { dispa ...

  5. [Vue] : Vue指令

    Vue指令之 v-cloak v-cloak是解决解决插值表达式的闪烁问题 . 给插值表达式的元素加上v-cloak <p v-cloak>{{ msg }}</p> 为v-c ...

  6. Vue 指令篇 案例(输入提交显示 提交数据_列表)

    一.文本操作指令 //1.v-text <p v-text="msg"></p> 等价于 <p>{{msg}}</p> //2.v- ...

  7. Vue框架（二）——Vue指令（v-once指令、v-cloak指令、条件指令、v-pre指令、循环指令）、todolist案例、Vue实例（计算、监听）、组件、组件数据交互

    Vue指令 1.v-once指令  单独使用,限制的标签内容一旦赋值,便不可被动更改(如果是输入框,可以主动修改) <!DOCTYPE html> <html lang=" ...

  8. Vue学习笔记【7】——Vue指令之v-model和双向数据绑定

    v-model是唯一可以实现双向数据绑定的vue指令 单向数据绑定:修改内存中的数据,页面上同步更改.v-bind <!-- v-bind 只能实现数据的单向绑定,从 M 自动绑定到 V, 无法 ...

  9. 第三篇：Vue指令

    Vue指令 1.文本指令相关 v-*是Vue指令,会被vue解析,v-text="num"中的num是变量(指令是有限的,不可以自定义) v-text是原样输出渲染内容,渲染控制的 ...

随机推荐

  1. 唱吧基于 MaxCompute 的大数据之路

    使用 MaxCompute之前,唱吧使用自建体系来存储处理各端收集来的日志数据,包括请求访问记录.埋点数据.服务器业务数据等.初期这套基于开源组件的体系有力支撑了数据统计.业务报表.风控等业务需求.但 ...

  2. 【python之路41】web框架

    一.web框架介绍 一共有两种web框架 1.既包含socket又能逻辑处理 tornado框架 2.只能处理逻辑 Django bottle flask  二.web框架的本质 众所周知,对于所有的 ...

  3. Windows 禁用Windows updata服务

    方法一:禁用Windows updata服务 按WIN+R 打开运行,输入 services.msc 回车 然后找到 “Windows updata”服务,双击后设置为禁用 应用即可; 方法二:推迟自 ...

  4. mysql查询 包含某个字符的记录

    从excel导入数据库的时候,发现poi自动把电话号码转换为科学计数法了 所以要把带e的筛选出来 SELECT * FROM t_customer WHERE phone like '%E%'; 然后 ...

  5. jedis与spring整合及简单的使用RedisTemplate操作

    整理一下redis与spring的整合.以及使用redisTemplate.首先是要导入spring所需要的jar.当然还有 jedis-2.1.0.jar,commons-pool-1.5.4.ja ...

  6. 极简bootstrap file 美化样式(无需第三方插件)

    原本的file上传表单非常的丑,但是又不想使用第三方插件,Bootstrap也没有相关的美化,于是用纯CSS完成,美化,JS实现功能,连BootStrap都不需要,十分简单 1.给原版丑表单隐藏了di ...

  7. python中bisect模块的使用

    一般用于二分查找, 当然列表应该是有序表 参考于: http://blog.csdn.net/xiaocaiju/article/details/6975714

  8. ASP.NET CORE使用MailKit的一个故障点分析

    ASP.NET CORE下有需要发邮件的需求,但是原来framework下的 system.net.mail,没有实现smtpclient的功能(当时看是没有,说是准备并入.net core来着),所 ...

  9. css中background背景属性概述

    background:url(背景图片路径) no-repeat;/*不重复默认在左上方*/ background:url(背景图片路径) no-repeat center;/*不重复背景图片中间显示 ...

  10. Redis-cli 命令不能用

    bash: redis-cli: command not found... 环境: Linux7.X 在运行redis-cli命令的时候提示错误: 解决方案: 1. wget http://downl ...