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

时间：2020-07-12 18:59:38 阅读：67 评论：0 收藏：0 [点我收藏+]

标签：enc head table sele racket lock loaded utf-8 span

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

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

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

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

标签：enc head table sele racket lock loaded utf-8 span

原文地址：https://www.cnblogs.com/juddy/p/13289107.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行