zoukankan      html  css  js  c++  java
  • v-for指令用法一

    <!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>
    

      

  • 相关阅读:
    Linux文件权限
    Linux命令
    LeetCode
    LeetCode
    LeetCode
    LeetCode
    LeetCode
    LeetCode
    LeetCode
    LeetCode
  • 原文地址:https://www.cnblogs.com/kymming/p/6429125.html
Copyright © 2011-2022 走看看