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

Posted 2020-12-17 IT特工

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue.js---相关语法介绍第三部分相关的知识，希望对你有一定的参考价值。

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---相关语法介绍第三部分的主要内容，如果未能解决你的问题，请参考以下文章

Vue.js 源码目录设计

full

Vue.js 中的片段

使用带有渲染功能的 Vue.js 3 片段

Vue 基础语法入门（转载）

vue介绍——模板语法