VUE.js快速入门（vue本地应用③）

v-for:遍历所在集合，数组..内容

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <input type="button" value="add" @click="addClick"/>
        <input type="button" value="remove" @click="removeClick"/>
        <ul>
            <li v-for="city in cities">
                {{city}}
            </li>
        </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app=new Vue({
            el:"#app",
            data:{
                cities:["西安","北京","上海","杭州"]
            },
            methods:{
                addClick:function(){
                    this.cities.push("深圳");
                },
                removeClick:function(){
                    this.cities.pop();
                }
            }
        })
    </script>
</body>
</html>

 

 v-for是根据数据生成列表结构

数组和v-for经常联合使用

语法是（item，index）in 数据

数组长度跟新会同步到页面，是响应式的

 

on的事件修饰符keyup

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <input type="text" @keyup.enter="enter"/>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app=new Vue({
            el:"#app",
            methods:{
                enter:function(){
                    alert("nihao")
                }
            }
        })

    </script>
</body>
</html>

 

 事件后面跟修饰符可以限制

.enter可以触发限制

修饰符有很多种

 

v-model

获取和设置表单元素（双向数据绑定）

双向的意思是修改表单data里的值就会变，修改data，表单里的值会变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <input type="text" v-model="message"/>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app=new Vue({
            el:"#app",
            data:{
                message:"欢迎学习vue"
            }
        })
    </script>
</body>
</html>

 

在文本框里修改，内存中的值会同时改变

v-model指令作用是便捷的获取和设置表单元素，

绑定数据会和表单元素的值相关联

绑定数据是双向的

 

posted @ 2020-05-30 12:25  蔡老板2019  阅读(281)  评论(0)  编辑  收藏  举报