zoukankan      html  css  js  c++  java
  • vue组件

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <script src="./vuev2.5.21.js"></script>
    </head>
    <body>
        <div id="app">
                <input type="text" v-model="inputValue">
                <button @click="BtnClick">提交</button>
                <ul>
                    <!-- <li v-for="item in list">{{item}}</li> -->
                    <todo-item v-bind:content="item"  v-for="item in list"></todo-item>
    
                </ul>
        </div>
        <script>
            Vue.component("TodoItem",{
                props:["content"],
                template:"<li>{{content}}</li>"
            })
            var app= new Vue({
                el:"#app",
                data:{
                    inputValue:"",
                    list:[],
                  
                },
                methods:{
                    BtnClick:function(){
                    //   console.log(this.list);
                    this.list.push(this.inputValue);
                    this.inputValue=""; 
                    }
                }
            })
        </script>
        
    </body>
    </html>
    v-dind:content="item" 向组件传递值
    props=["content"] 接受组件的值
  • 相关阅读:
    react常用的方法
    react手动搭建
    js基础
    原生JavaScript实例之简单放大镜
    ||与&&的返回值
    promise简单小结
    连接服务器一般步骤
    github小总结
    __proto__指向问题
    一些函数返回值
  • 原文地址:https://www.cnblogs.com/tuziling/p/10197625.html
Copyright © 2011-2022 走看看