<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

    <title></title>

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

    <script src="src/assets/vue2.min.js"></script>

</head>

<body>

    <ul>

        <li v-for="option in options">

            <p class="text-success" @click="getIndex($index)">{{option.text}}{{option.value}}</p>

        </li>

    </ul>

    <div v-if="isNaN(click)==false">

        <span>你点击的索引为: {{ click }}</span>

    </div>

    <div v-else>

        <p class="text-danger">试着点击上方LI条目</p>

    </div>

<script type="text/javascript">

    new Vue({

        el: 'body',

        data: {

            click: 'a',

            options: [

                { text: '上海市', value: '20' },

                { text: '湖北省', value: '43' },

                { text: '河南省', value: '45' },

                { text: '北京市', value: '10' }

            ]

        },

        methods:{

            getIndex:function(index){

                this.click=index;      //这里的click取值是data里的值，每触发一次点击事件，click就被重新赋值一次

            }

        }

    });

</script>

</body>

</html>

　　

v-for指令用法一的更多相关文章

  1. v:bind指令对于传boolean值的注意之处

    1,

  2. vue教程2-07 自定义指令

    vue教程2-07 自定义指令 自定义指令: 一.属性: Vue.directive(指令名称,function(参数){ this.el -> 原生DOM元素 }); <div v-re ...

  3. linux查看文件相关指令

    以下内容整理自以下两篇文章: http://www.cnblogs.com/xilifeng/archive/2012/10/13/2722596.html Linux 查看文件内容的命令 http: ...

  4. linux文件管理指令

    总述 所有指令都可以使用--help来查看说明 例如:cat --help -x 表示参数 1.cat:用于打印文件(cat -x filename) 参数: -n:由1开始对每行进行编号 -b:由1 ...

  5. git 指令笔记

    狂躁,太狂躁!!赶上过年,赶上自己的懒癌,12月底就学完的教程直到今天才整理笔记,中途沉默在游戏中..... 只给出Windows下git指令操作,推荐大家去廖雪峰前辈那里学习(百度搜索:廖雪峰的官方 ...

  6. Linux里面的压缩和解压类指令

    gzip/gunzip 指令 ( .gz  不能压缩目录) gzip 用于压缩文件, gunzip 用于解压的 . gzip gzip命令用来压缩文件.gzip是个使用广泛的压缩程序,文件经它压缩过后 ...

  7. 运维工程师必会的109个Linux命令

    运维工程师必会的109个Linux命令 版本1.0 崔存新 更新于2009-12-26 目录 1 文件管理 6 1.1 basename 6 1.2 cat 6 1.3 cd 7 1.4 chgrp ...

  8. 【Linux】linux命令大全

    [注意]:命令[compgen -b]可以列出所有当前系统支持的命令. 109个Linux命令 目录 1       文件管理... 5 1.1          basename. 5 1.2    ...

  9. 前端Vue基础学习

    Vue基础 对与vue的简洁明了的干货分享,适合小白学习观看,如果有笔误或者想了解更多的,请给笔者留言,后续会继续分享,从零开始的vue相关经验 1.创建vue实例 <div id=" ...

随机推荐

  1. Oracle SOA Suit Adapter

    SOA架构的一个核心的使命是整合企业现存的各式各样的计算资源,它不仅仅是代码层面的整合,更是硬件,计算能力,服务能力的整合.Oracle SOA Suite在这方面做得特别的贴切,它提供了一组Adap ...

  2. 如何用迅雷下载在网页中的Flash动画或课件

    对于框架网页而言,看地址栏可以发现后缀不是SWF,就是说该网站没有直接把Flash给你,右击该Flash也没有下载选项.   此时虽然右下角是Flash,但是左边和上面网页部分还是正常的元素,右击这些 ...

  3. 直接返回list不封装的结果集

    直接返回list不封装的结果集,在Jsp访问方式: 1.封装成map访问 2.用jstl: <c:forEach var="images" items="${lis ...

  4. H2数据库集群

    H2数据库集群 1. H2数据库简单介绍 1.1 H2数据库优势 经常使用的开源数据库:H2,Derby,HSQLDB.MySQL,PostgreSQL. 当中H2,HSQLDB相似,十分适合作为嵌入 ...

  5. C结构体之位域（位段）（转）

    有些信息在存储时,并不需要占用一个完整的字节, 而只需占几个或一个二进制位.例如在存放一个开关量时,只有0和1 两种状态, 用一位二进位即可.为了节省存储空间,并使处理简便,C语言又提供了一种数据结构 ...

  6. Django开发微信公众平台

    处理微信发来的信息,实际上就是处理xml的过程.先写xml工具类 # -*- coding:utf-8 -*- from xml.dom import minidom from Web.model.W ...

  7. 编程算法 - 多重部分和问题 代码(C)

    多重部分和问题 代码(C) 本文地址: http://blog.csdn.net/caroline_wendy 题目: 有n种不同大小的数字a, 每种各m个. 推断能否够从这些数字之中选出若干使它们的 ...

  8. Mysql 基本操作指令+增删查改

    nqinx是web前端服务端 负载均衡(软件)可以将用户请求调度到几台机器的nqinx上去做 ,一般都有两个负载均衡,一个做备用硬件的要比软件的好,但是一般公司都用软件实现数据库软件其实也是一个服务端 ...

  9. eclipse的debug使用（转载）

    出处:http://www.blogjava.net/yxhxj2006/archive/2012/08/30/386621.html 远程Debug: http://blog.sina.com.cn ...

  10. Netty聊天器（实战一）：从0开始实战100w级流量应用

    Java 聊天程序(百万级流量实战一):系统介绍 疯狂创客圈 Java 分布式聊天室[ 亿级流量]实战系列之14 [博客园 总入口 ] 源码IDEA工程获取链接:Java 聊天室 实战 源码 写在前面 ...