美文网首页
说出至少4种vue当中的指令和它的用法?

说出至少4种vue当中的指令和它的用法?

作者: 叮叮当1016 | 来源:发表于2018-08-07 14:30 被阅读0次

文件路径:http://bbs.daxiangclass.com/?thread-307.htm

1.v-model双向数据绑定

<input type="text" v-model="msg"/>

2.v-for循环

<div id="box">

    <ul>

            <li v-for="item in arr">

                <span>{item.name}</span>

                <span>{item.age}</span>

            </li>

    </ul>

</div>

<script src="text/JavaScript">

    new Vue({

            el:"#box",

            data(){

                return(){

                    arr:[

                                {"name":"yifengchun","age":18},

                                 {"name":"yifengchun","age":18},

                                 {"name":"yifengchun","age":18},

                                 {"name":"yifengchun","age":18}

                            ]

                }

            }

    })

</script>

3.v-show 显示与隐藏

<div id="box">

    <div style="width:100px;height:100px;border:1px solid red;display:none" v-show="show"></div>

</div>

<script>

    new Vue({

            el: "#box",

            data(){

                return {

                    show: true

                }

            }

        })

</script>

4.v-on事件

<div id="box">

    <button v-on:click="say">按钮</button>

</div>按钮-->

<script>

new Vue({

        el: "#box",

        data(){

            return {}

        },

        methods: {

            say() {

                alert(111);

            }

        }

    })

</script>

相关文章

网友评论

      本文标题:说出至少4种vue当中的指令和它的用法?

      本文链接:https://www.haomeiwen.com/subject/ofoovftx.html