一、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. TZOJ 5963 Increasing Sequences(线性DP)

    描述 Given a string of digits, insert commas to create a sequence of strictly increasing numbers so as ...

  2. LuoguP3690 【模板】Link Cut Tree （动态树） LCT模板

    P3690 [模板]Link Cut Tree (动态树) 题目背景 动态树 题目描述 给定n个点以及每个点的权值,要你处理接下来的m个操作.操作有4种.操作从0到3编号.点从1到n编号. 0:后接两 ...

  3. 前端（jQuery）（6）-- jQuery的扩展与noConflict

    1.jQuery的扩展 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  4. web前端学习（四）JavaScript学习笔记部分（10）-- JavaScript正则表达式

    1.JavaScript正则表达式课程概要 方便查找字符串.数字.特殊字串等等 2.正则表达式的介绍 RegExp是正则表达式的缩写 当检索某个文本时,可以使用一种模式来描述要检索的内容.RegExp ...

  5. [转]深入理解客户区尺寸client

    关于元素尺寸,一般地,有偏移大小offset.客户区大小client和滚动大小scroll.前文已经介绍过偏移属性,后文将介绍scroll滚动大小,本文主要介绍客户区大小client 客户区大小 客户 ...

  6. 20190813「Night」-Blind

    夜场. 先说说题面,周,任,飞? 好像是个巨巨巨巨巨巨佬. 郭神?同上. 好像题解包里都有. %%%出题人liu_runda. liu_runda是谁? 凭实力在NOI2017退役的辣鸡蒟蒻. 郭神是 ...

  7. MySQL数据库的全局锁和表锁

    1.概念 数据库锁设计的初衷是处理并发问题.作为多用户共享的资源,当出现并发访问的时候,数据库需要合理地控制资源的访问规则.而锁就是用来实现这些访问规则的重要数据结构. 2.锁的分类 根据加锁的范围, ...

  8. Centos无法连接无线网络解决办法

    系统->管理->服务器设置->服务,将NetworkManager选项勾选,点击重启服务.然后就可以看到右上角已经有了网络连接.

  9. Apache配置虚拟主机,全部指向一个目录

    配置虚拟主机的时候,全部指向了一个目录,解决方法是在httpd.conf中添加: NameVirtualHost *:80

  10. html 遮罩层以及弹出框的制作

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...