🌵Vue本地应用(列表循环,表单元素绑定)

177 阅读1分钟

1.v-for指令

根据数据生成列表结构

语法:

    <div id="app">
        <ul>
            <li v-for="(item,index)in arr">
                {{index}}{{item}}
            </li>
            <li v-for ="{{item,index}} in objArr">
                {{item.name}}
            </li>
        </ul>
    </div>
        var app = new Vue({
            el:"#app",
            data:{
                arr:[1,2,3,4,5],
                objArr:[
                    {name:"jack"},
                    {name:"rose"}
                ]
            }
        })

v-for.gif

// 源码:
<body>
    <div id="app">
        <input type="button" value="增加数据" @click="add">
        <input type="button" value="移除数据" @click="remove">
        <ul>
            <li v-for="(item,index) in arr">{{index+1}}四大名著是{{item}}</li>
        </ul>
        <h2 v-for="item in person" :title="item.name">{{item.name}}</h2>
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                arr: ["西游记", "三国演义", "水浒传", "红楼梦"],
                person: [
                    { name: "孙悟空" },
                    { name: "猪八戒" },
                    { name: "沙和尚" }
                ]
            },
            methods: {
                add: function () {
                    this.person.push({ name: "唐僧" })
                },
                remove: function () {
                    this.person.shift()
                }
            }
        })
    </script>
</body>

总结:

  • v-for指令的作用是:根据数据生成列表结构。

  • 数组经常和v-for指令结合使用。

  • 语法是(item,index)in数据。

  • item和index可以结合其他指令一起使用。

  • 数组长度的更新会同步到页面上,是响应式的。

2.v-on补充

传递自定义参数,事件修饰符

语法:

    <div id="app">
        <input type="button" @click="doIt(p1,p2)">
        <input type="button" @keyup.enter="sayHi">
    </div>
        var app =new Vue({
            el:"#app",
            data:{
            },
            methods:{
                doIt:function(p1,p2){},
                sayHi:function(){}
            }
        })

image.png

// 源码
<body>
    <div id="app">
        <input type="button" value="传递参数" @click="doIt('老铁',666)">
        <input type="text" @keyup.enter="sayHi">
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
            },
            methods: {
                doIt: function (p1, p2) {
                    alert(p1);
                    alert(p2)
                },
                sayHi: function () {
                    alert("Hello")
                }
            }
        })
    </script>
</body>

总结:

事件绑定的方法写成函数调用的形式,可以传入自定义参数。

定义方法的时候需要定义形参来接受传入的实参。

事件的后面跟上.修饰符可以对事件进行限制。

.enter可以限制触发事件的按键为回车。

3.v-model指令

获取和设置表单元素的值(双向数据绑定)

语法:

    <div id="app">
        <input type="text" v-model="message" />
    </div>
        var app = new Vue({
            el: "#app",
            data: {
                message: "前端人永不言弃"
            }
        })

这里数据是双向绑定的哦!

image.png

v-model.gif 总结:

v-moel指令的作用是便捷的设置和获取表单元素的值。

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

绑定数据和表单元素的值是双向绑定的。