<!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. Android Service实现双向通信（一）

    首先,大概来总结一下与Service的通信方式有很多种: 通过BroadCastReceiver:这种方式是最简单的,只能用来交换简单的数据: 通过Messager:这种方式是通过一个传递一个Mess ...

  2. Android 沉浸式全屏

    Android 4.4 带来了沉浸式全屏体验, 在沉浸式全屏模式下, 状态栏. 虚拟按键动态隐藏, 应用可 以使用完整的屏幕空间, 按照 Google 的说法, 给用户一种 “身临其境” 的体验. A ...

  3. Android --修改arr文件

    1. 改为zip文件 2. 修改 3. 改后缀

  4. Android:MVC模式(下)

    在上一篇文章中,我们将 View 类单独出来并完成了设计和编写.这次我们将完成 Model 类,并通过 Controller 将两者连接起来,完成这个计算器程序. 模型(Model)就是程序中封装了数 ...

  5. 【转载】面向切面编程(AOP)学习

    看到这篇文章,学习一下:http://www.ciaoshen.com/2016/10/28/aop/ 想理清一下从“动态代理”,到 “注释”,到“面向切面编程”这么一个技术演进的脉络. 只想讲清楚两 ...

  6. ffmpeg一些filter使用方法、以及一些功能命令

    1.加字幕 命令:ffmpeg -i <input> -filter_complex subtitles=filename=<SubtitleName>-y <outpu ...

  7. hdu1034 简单模拟

    这里开一个二维数组.num[105][2];   我也不知道N有多少,随便开的,  那么这里num[i][0] 表示当前 第 i 个人拥有的糖果数,num[i][1]表示他上面一个人分给他的糖果数.详 ...

  8. [LeetCode][Java] Best Time to Buy and Sell Stock IV

    题目: Say you have an array for which the ith element is the price of a given stock on day i. Design a ...

  9. go mysql dsn

    https://github.com/go-sql-driver/mysql#dsn-data-source-name DSN (Data Source Name) The Data Source N ...

  10. java 文件的写入和读取

    //写入操作 方法1 OutputStream f = new FileOutputStream("C:/j/j.txt"); f.write("aaaaaaa" ...