<!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. 【hibernate postgresql】注解@TypeDef/@Enumerated/数据库字段gender为枚举类型，从前台接受到实体后进行保存报错：org.postgresql.util.PSQLException: ERROR: column "gender" is of type gender but expression is of type character varying

    数据库字段gender为枚举类型,从前台接受到实体后进行保存报错:org.postgresql.util.PSQLException: ERROR: column "gender" ...

  2. Android -- 开机启动无界面后台程序

    简单的说,这是一个没有界面的后台运行的应用程序 而且,还有一功能:开机自启动,启动运行一个服务 程序结构非常简单,两个类,一个是service的扩展类,一个是BroadcastReceiver扩展类 ...

  3. 【经验之谈】适合学习的IT教程站点列表

    ①  CSDN   http://www.csdn.net/ ②  gitHub   https://github.com/ ③  极客学院  http://www.jikexueyuan.com/ ...

  4. visual studio usage tips

    reset all settings on visual stdio microsoft visual studio X\common7\ide\devenv.exe /setup /resetuse ...

  5. Keras学习

    参加比赛用到了keras,虽然之前用tensorflow,但是感觉tensorflow的确不太友好,api比较难读,然后就学习keras使用 随着深入,发现keras的api确实比较友好 跑了一些ex ...

  6. 在kubernetes 集群运行 odoo

        kubernetes 可以自动运行多个 odoo服务的副本,因此 非常适用用来做高可用的odoo部署, 在本例中,odoo服务运行在 kubernetes 集群中, 而 postgreSQL ...

  7. MyEclipse 设置智能提示

    choice 1: -->window→Preferences→Java→Editor→Content Assist, --->将Auto activation delay 的数值改为一个 ...

  8. 关于提高沟通能力的书单zz

    上周推荐了一份关于提高写作能力的书单,这周,我们来聊聊沟通能力. 在现代社会,沟通能力变得越来越重要.人与人之间的社交渠道越来越丰富,工作中的协同合作也越来越普遍.我们要沟通的人越来越多,节奏越来越快 ...

  9. 基于OpenCL的深度学习工具：AMD MLP及其使用详解

    基于OpenCL的深度学习工具:AMD MLP及其使用详解 http://www.csdn.net/article/2015-08-05/2825390 发表于2015-08-05 16:33| 59 ...

  10. HDU 6076 Security Check DP递推优化

    Security Check Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 524288/524288 K (Java/Others) ...