Vue第一节

基本格式

<!DOCTYPE html>

<html lang="en">

<head>

       <meta charset="UTF-8">

      <title>Document</title>

</head>

 <body>

    <div class='itany'>

      {{msg}}

   </div>

<script src='js/vue.js'></script>

<script>

     new Vue({

            el:'.itany',

data:{

     msg:'hello vue'

}

})

</script>

<div class="itany"></dov>

<script src=''></script>

</body>

</html>


二:用V-for做table表格

body代码:

               编号

                名字

                价格

                {{value.num}}

                {{value.name}}

                {{value.price}}

js代码:

new Vue({

        el:'#app',

        data:{

            arr:[1,2,3,4,5],

            obj:{name:'jack',old:'18'},

            arrs:[

                {num:1,name:'香蕉',price:3},

                {num:2,name:'苹果',price:2},

                {num:3,name:'鸭梨',price:1},

            ]

        }

})

三:v-model

dody代码:

           //v-model  双向绑定   一般只用于表单

{{message}}

js代码:

new Vue({

    el:'#app',

    data:{

        message:''

    }

})

四:v-on

点击button会弹出111

body部分:

    按钮

js部分:

new Vue({

    el:'#app',

    data:{

        message:'hello World'

    },

    methods:{

        alt:function(){

            alert(111)

        }

     }

})

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容