请选择 进入手机版 | 继续访问电脑版

拿起手机
扫一扫

查看: 26|回复: 0

vue定义全局组件

[复制链接]

528

主题

545

帖子

1万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
14644

活跃会员热心会员推广达人宣传达人论坛元老

QQ
发表于 2019-11-6 18:01:41 | 显示全部楼层 |阅读模式
  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
  5.                 <meta charset="utf-8">
  6.                 <title>vue</title>
  7.         </head>
  8.         <body>
  9.         <div id="app">
  10.          <input type="text" v-model="inputText" />
  11.          <input v-on:click="click()" type="submit" value="提交" />
  12.          <ul>
  13.                 <!-- <li v-for="(item,k) in arr">{{item}}</li> -->
  14.                 <todo-item v-bind:content="item" v-for="item in arr"></todo-item>
  15.          </ul>

  16.         </div>
  17.                
  18.         </body>
  19.         <script>
  20.                 //定义全局组件
  21.                 Vue.component("TodoItem",{
  22.                     props:['content'],
  23.                         template:"<li>{{content}}</li>"
  24.                        
  25.                 })
  26.                 var app = new Vue({
  27.                         el:"#app",
  28.                         data:{
  29.                           message:'this is vue',
  30.                           inputText:'',
  31.                           arr:[],
  32.                         },
  33.                         methods:{
  34.                                 click:function(){
  35.                                         this.arr.push(this.inputText);
  36.                                         this.inputText="";
  37.                                 }
  38.                         }
  39.                 });
  40.                
  41.         </script>
  42.        
  43. </html>
复制代码


注册会员遇到问题请发邮箱到2422154647@qq.com 免费领取账户,禁止发布任何广告!本论坛是个人知识点记录平台! 感谢配合!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册  

本版积分规则

快速回复 返回顶部 返回列表