一、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. maximum clique 1

    maximum clique 1 时间限制:C/C++ 1秒,其他语言2秒空间限制:C/C++ 262144K,其他语言524288KSpecial Judge, 64bit IO Format: % ...

  2. BZOJ1491:1491: [NOI2007]社交网络

    1491: [NOI2007]社交网络 Time Limit: 10 Sec  Memory Limit: 64 MBSubmit: 2204  Solved: 1175[Submit][Status ...

  3. MySQL系列(八)--数据库分库分表

    在互联网公司或者一些并发量比较大的项目,虽然有各种项目架构设计.NoSQL.MQ.ES等解决比较高的并发访问,但是对于数据库来说,压力 还是太大,这时候即使数据库架构.表结构.索引等都设计的很好了,但 ...

  4. SQL Server分页查询进化史

    分页查询一直SQL Server的一个硬伤,就是是经过一些进化,比起MySql的limit还是有一些差距. 一.条件过滤(适应用所有版本) 条件过滤的方法有很多,而思路就是利用集合的差集选择出目标集合 ...

  5. 【Scala学习笔记】一、函数式编程的思想

    1. 函数是头等值.     在函数编程中,函数也是值,与整数和字符串处于同一地位.函数可以像变量一样被创建,修改,并当成变量一样传递,返回或是在函数中嵌套函数. 函数可以当做参数传递给其他函数.   ...

  6. java使用正则表达式,去除windows系统中文件名的非法路径

    w哦我爬取一个页面,并且把附件下载下来,保存,有的时候文件名,带*号,所以,无法保存 这时候就要删除所有的非法字符 String fileName = resourceName + fileTypt; ...

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

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

  8. 解决git的the remote end hung up问题_百度经验

    使用git更新或提交中途有时出现The remote end hung up unexpectedly的异常,特别是资源库在国外的情况下.此问题可能由网络原因引起. 工具/原料   git 方法/步骤 ...

  9. UnicodeEncodeError：'latin-1' codec can't encode characters in position 0-1: ordinal not in range(256) Scrapy

    1.使用scrapy对数据进行入库时,出现如下错误: UnicodeEncodeError:'latin-1' codec can't encode characters in position 0- ...

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

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