Vue.js(二)---相关语法介绍第三部分

  2. vue中的按键修饰符，对回车键进行演示

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>vue中的按键修饰符</title>
            <script type="text/javascript" src="js/Vue.js"></script>
        </head>
        <body>
            <div id="app">
                <input type="text" v-on:keydown.enter="fun1" />
            </div>
        </body>
        <script>
            new Vue({
                el:'#app',
                methods:{
                    fun1:function(){
                        alert("按下的是回车")
                    }
                }
            });
        </script>
    </html>
    ​

     

  3. vue中v-for的使用

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>v-for遍历数组</title>
            <script type="text/javascript" src="js/Vue.js"></script>
        </head>
        <body>
            <div id="app">
                <ul>
                    <li v-for="(item) in arr">{{item}}</li>
                </ul>
            </div>
        </body>
        <script>
            new Vue({
                el:'#app',
                data:{
                    arr:[1,2,3,4,5]
                }
            });
        </script>
    </html>
    ​
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>v-for遍历对象</title>
            <script type="text/javascript" src="js/Vue.js"></script>
        </head>
        <body>
            <div id="app">
                <ul>
                    <li v-for="(key,value) in product">{{key}}={{value}}</li>
                </ul>
            </div>
        </body>
        <script>
            new Vue({
                el:'#app',
                data:{
                    product:{
                        id:1,
                        name:"笔记本电脑",
                        price:5000
                    }
                }
            });
        </script>
    </html>
    ​
    ​
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>v-for遍历对象</title>
            <script type="text/javascript" src="js/Vue.js"></script>
        </head>
        <body>
            <div id="app">
                <table border="1">
                    <tr>
                        <td>序号</td>
                        <td>编号</td>
                        <td>名称</td> 
                        <td>价格</td>
                    </tr>
                    <tr v-for="(product,index) in products">
                        <td>{{index+1}}</td>
                        <td>{{product.id}}</td>
                        <td>{{product.name}}</td>
                        <td>{{product.price}}</td> 
                    </tr>
                </table>
            </div>
        </body>
        <script>
            new Vue({
                el:'#app',
                data:{
                    products:[
                    {
                        id:1,
                        name:"笔记本电脑",
                        price:5000
                    },
                    {
                        id:2,
                        name:"智能手机",
                        price:4000
                    },
                    {
                        id:3,
                        name:"小米电视",
                        price:5899
                    },
                    
                    ]
                }
            });
        </script>
    </html>
    ​

     

  4. vue中v-model的使用(可以从json格式数据中取值)

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>v-model</title>
            <script type="text/javascript" src="js/Vue.js"></script>
        </head>
        <body>
            <div id="app">
                 <form action="" method="post">
                    用户名：<input type="text" name="username" v-model="user.username" /><br />
                    密码：<input type="text" name="password" v-model="user.password" />
                </form>
            </div>
        </body>
        <script>
            new Vue({
                el:'#app',
                data:{
                    user:{
                        username:"admin",
                        password:"admin"
                    }
                }
            });
        </script>
    </html>
    ​

  5.  

posted @ 2020-07-12 17:34  IT特工  阅读(203)  评论(0)    收藏  举报