一、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. UVA1391/LA3713 Astronauts

    题意:有A.B.C3个任务分配给n个宇航员,其中每个宇航员恰好分配一个任务.假设n个宇航员的平均年龄为x,只有年龄大于x的才能领取A任务:只有年龄严格小于x的才能领取B任务,而任务C没有限制.有m对宇 ...

  2. Leetcode162. Find Peak Element寻找峰值

    示例 2: 输入: nums = [1,2,1,3,5,6,4] 输出: 1 或 5 解释: 你的函数可以返回索引 1,其峰值元素为 2:   或者返回索引 5, 其峰值元素为 6. 说明: 你的解法 ...

  3. 删除n天前的文件或文件夹 bat批处理

    @echo off @echo deleting... FORFILES /p "D:\a" /D -1 /C "cmd /c echo deleting @file . ...

  4. MySQL：比较两个数据表不同部分

    简单比较 1.SELECT * FROM t2 WHERE id NOT IN (SELECT id FROM t1); 2.SELECT * FROM t2 WHERE NOT EXISTS(SEL ...

  5. 这些Excel学会了，你做账的效率将大大提高

    这些Excel学会了,你做账的效率将大大提高 这些功能学会了,工作效率将大大提高. 1.excel的快速访问工具栏: 我的快速访问工具栏由左到右主要是"保存"."新建&q ...

  6. MySQL中一条更新语句是如何执行的

    1.创建表的语句和更新的语句 这个表的创建语句,这个表有一个主键ID和一个整型字段c: mysql> create table T(ID int primary key, c int); 如果要 ...

  7. Linux环境变量的种类

    按环境变量的生存周期来划分,Linux的环境变量可分为两类: 1永久的:需要修改配置文件,变量永久生效. 2临时的:使用export命令行声明即可,变量在关闭shell时失效.

  8. select2 如何自定义提示信息-布布扣-bubuko.com

    标签:color   dom   layui   href   默认事件   替换   each   ase   options 最近项目中使用到了select2来美化和丰富下拉框的功能,这款插件功能 ...

  9. ubuntu16安装python3.7

    ####################################################源码安装python,注意shell脚本第一行开头的要求#################### ...

  10. 【笔记】http1.1支持的7种请求方法

    本文是本人复习http协议整理笔记,以备后续查阅. http1.1支持的7种请求方法:get.post.head.options.put.delete.trace 在internet应用中,最常用的请 ...