<!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. ios 使用 resignFirstResponder 无法hide键盘

    - (BOOL)disablesAutomaticKeyboardDismissal {    return NO;}

  2. Hierarchical data in postgres

    https://coderwall.com/p/whf3-a/hierarchical-data-in-postgres --------------------------------------- ...

  3. word中更改图片和标题之间的垂直距离

    word中插入图片后.往往须要给图片加上标题. 你插入图片和给图片插入标题时,word用的是默认的格式给你插入的图片和标题. 假如原来的paragraph是2倍行距.你的图片和标题之间的距离也是2倍行 ...

  4. 《图论》——广度优先遍历算法(BFS)

    十大算法之广度优先遍历: 本文以实例形式讲述了基于Java的图的广度优先遍历算法实现方法,详细方法例如以下: 用邻接矩阵存储图方法: 1.确定图的顶点个数和边的个数 2.输入顶点信息存储在一维数组ve ...

  5. solaris软件管理 FTP

    安装一些常用软件 一.应用程序与系统命令的关系: 系统命令文件位置在 /bin /sbin下面或为shell内部指令:完成对系统的基本管理工作:一般在字符操作界面中运行:一般包括命令字.命令选项和命令 ...

  6. 如何重建一个损坏的调用堆栈（callstack）

    原文作者:Aaron Ballman原文时间:2011年07月04日原文地址:http://blog.aaronballman.com/2011/07/reconstructing-a-corrupt ...

  7. 转_【大话IT】你离大数据架构师有多远？

    话题背景: 首先,先科普下“数据架构师”的相关职责:数据架构师要负责建立和维持公司数据储存的技术基准,策划硬体和软体的结构,确保数据储存系统可以支持未来的数据量和分析需求. 据了解,美国地区数据架构师 ...

  8. Hadoop文档 索引

    Hadoop中文文档 http://hadoop.apache.org/docs/r1.0.4/cn/index.html Hadoop资料整理 http://www.itpub.net/thread ...

  9. 【TensorFlow-windows】(二) 实现一个去噪自编码器

    主要内容: 1.自编码器的TensorFlow实现代码(详细代码注释) 2.该实现中的函数总结 平台: 1.windows 10 64位 2.Anaconda3-4.2.0-Windows-x86_6 ...

  10. OpenStack部署到Hadoop的四种方案

    随着企业開始同一时候利用云计算和大数据技术.如今应当考虑怎样将这些工具结合使用.在这样的情况下,企业将实现最佳的分析处理能力.同一时候利用私有云的高速弹性 (rapid elasticity) 和单一 ...