一、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. Luogu P1312 Mayan游戏(搜索)

    P1312 Mayan游戏 题意 题目描述 Mayan puzzle是最近流行起来的一个游戏.游戏界面是一个\(7\)行\(\times 5\)列的棋盘,上面堆放着一些方块,方块不能悬空堆放,即方块必 ...

  2. leetcode 352 & leetcode 239 & leetcode 295 & leetcode 53 & leetcode 209

    lc352 Data Stream as Disjoint Intervals 可以用treemap解 key保存interval的start,value保存interval的end.分别找出当前va ...

  3. 批量操作文本文件进行dos/unix格式转换

    批量将目录下所有文件进行 dos/unix 格式转换 使用 sed + grep #sed -i "s/原字符串/新字符串/g" `grep 原字符串 -rl 所在目录` eg:  ...

  4. vue-i18n 的用法

    主要用于网站国际化,开发可以切换多语言的网站 1,安装 npm install vue-i8n 2,在main.js中引入和注册 import VueI18n from 'vue-i18n' impo ...

  5. ES6学习笔记之解构赋值

    1.数组的解构赋值 简单用法 { // 旧 let a=1,b=3; //新 let [a,b]=[1,3]; console.log(a,b);// 1 3 } 只要等号两边的模式相同,左边的变量就 ...

  6. java 7,8 排序异常

    排序报 java.lang.IllegalArgumentException: Comparison method violates its general contract! 要明确返回-1, 0, ...

  7. hive如何配置支持事务及insert、update、delete

    Hive从0.14版本开始支持事务和行级更新,但缺省是不支持的,需要一些附加的配置.要想支持行级insert.update.delete,需要配置Hive支持事务. 一.Hive具有ACID语义事务的 ...

  8. iOS 动画队列—仿映客刷礼物效果

    http://www.cocoachina.com/ios/20160719/17101.html 最近在研究直播的相关知识,在网上看到了不少优秀的开源项目,但都没有看到映客那个刷礼物的效果,于是手痒 ...

  9. 低价替代Vector CANoe CAN总线适配解决方案支持所有USBCAN（周立功CAN、PCAN、Kvaser、ValueCAN、NI CAN）

    在汽车通信领域CAN总线使用非常广泛,最强大的工具有Vector Case(10WRMB).Pcan(2KRMB),ZLGCAN(1.5KRMB),KVASER(2KRMB).ValueCAN(4KR ...

  10. TSP

    #include <iostream> #include <limits.h> #include <string.h>; using namespace std; ...