vue.js定义全局组件

发布时间:2019-11-06 21:47:19 作者:tianxiang1314 阅读量:196

<!DOCTYPE html>
<html>
        <head>
                <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
                <meta charset="utf-8">
                <title>vue</title>
        </head>
        <body>
        <div id="app">
         <input type="text" v-model="inputText" />
         <input v-on:click="click()" type="submit" value="提交" />
         <ul>
                <!-- <li v-for="(item,k) in arr">{{item}}</li> -->
                <todo-item v-bind:content="item" v-for="item in arr"></todo-item>
         </ul>

        </div>
                
        </body>
        <script>
                //定义全局组件
                Vue.component("TodoItem",{
                    props:['content'],
                        template:"<li>{{content}}</li>"
                        
                })
                var app = new Vue({
                        el:"#app",
                        data:{
                          message:'this is vue',
                          inputText:'',
                          arr:[],
                        },
                        methods:{
                                click:function(){
                                        this.arr.push(this.inputText);
                                        this.inputText="";
                                }
                        }
                });
                
        </script>
        
</html>

上一篇:
下一篇:

我要评论 登录后才能发布评论

推荐阅读

 2019-11-06 21:47:19   tianxiang1314

vue.js定义全局组件

 2019-12-24 22:18:53   tianxiang1314

vue.js返回上一级操作

 2019-12-22 10:03:19   tianxiang1314

Xshell拖拽文件到linux...

 2019-12-18 21:21:06   tianxiang1314

把数据保存到数据库附加表 `de...

 2019-12-14 10:49:37   tianxiang1314

JavaScript 实现九宫格...

 2019-12-10 21:04:30   tianxiang1314

vuex使用方式(实现非父子组件...

 2019-12-05 22:30:18   tianxiang1314

better-scroll滚动无...

胡晓飞笔记   我要留言
Catfish(鲶鱼) CMS V 4.9.63