<!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. javascript --- 继承小结

    回顾之前学到的知识,大体上可以分为两类: 1. 基于构造器工作的模式. 2. 基于对象的工作模式. 3. 是否使用原型 4. 是否执行属性拷贝. 5. 两者都有(执行原型属性拷贝) 下面我们把之前的知 ...

  2. DozerBeanMapper + 对象转Map方法

    1.简介     dozer是一种JavaBean的映射工具,类似于apache的BeanUtils.但是dozer更强大,它可以灵活的处理复杂类型之间的映射.不但可以进行简单的属性映射.复杂的类型映 ...

  3. 七天学会ASP.NET MVC (一)——深入理解ASP.NET MVC 【转】

    http://www.cnblogs.com/powertoolsteam/p/MVC_one.html 系列文章 七天学会ASP.NET MVC (一)——深入理解ASP.NET MVC 七天学会A ...

  4. Kermit,Xmodem,1K-Xmodem,Ymodem,Zmodem传输协议小结

    来自:http://blog.163.com/czblaze_3333/blog/static/208996228201272295236713/ Kermit协议 报文格式: 1.       MA ...

  5. G 全然背包

    <span style="color:#3333ff;">/* /* _________________________________________________ ...

  6. 南阳 oj 表达式求值 题目35 数据结构 NYO题目链接

     建议不会的看别人的代码自己在之上模拟一遍,仅仅要耐心模拟就会做出来 题目链接:http://acm.nyist.net/JudgeOnline/problem.php? pid=35 #incl ...

  7. servelet

    获取页面传递过来的参数. 调用后台代码实现相关业务逻辑. 根据返回结果,进行页面跳转.   问题:httpsession? 拆解: String 里面的.spllit方法.拆开后,返回值为string ...

  8. mysql字符太长警告

    用navicateclient,打开相应的数据库. 打开函数.找相应的val()函数,进行编辑,就能够!编辑范围为4000

  9. Kubernetes之网络策略(Network Policy)

    系列目录 概述 Kubernetes要求集群中所有pod,无论是节点内还是跨节点,都可以直接通信,或者说所有pod工作在同一跨节点网络,此网络一般是二层虚拟网络,称为pod网络.在安装引导kubern ...

  10. 使用Apache Commons Chain(转载）

    原博客出处:http://phil-xzh.iteye.com/blog/321536 使用Commons Chain 作为程序开发人员,我们经常需要对一个实际上程序性的系统应用面向对象的方法.商业分 ...