zoukankan      html  css  js  c++  java
  • 走进Vue的第四天

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>todolist功能开发、组件拆分</title>
        <script src="vue.js"></script>
    </head>
    <body>
        <div id="root">
    
            <div>
                <input type="text" v-model="inputValue">
                <button @click="sub">提交</button>
            </div>
            <ul>
                <!--原始写法-->
                <li v-for="(item,index) in list">
                    {{item}}
                </li>
    
                <!--使用全局组件,通过使用:content来进行传值-->
                <todo-item v-for="(item,index) in list" :key="index" :content="item"></todo-item>
    
                <!--使用局部组件-->
                <todo-tem v-for="(item,index) in list" :content="item"></todo-tem>
            </ul>
    
        </div>
    
        <script>
            //定义一个全局组件(使用props进行接值)
            Vue.component('todo-item',{
                props:['content'],
                template: '<li>{{content}}</li>'
            });
    
            //定义一个局部组件(需要在vue实例中关联使用components)
            var todoItem = {
                props:['content'],
                template:"<li>{{content}}</li>"
            };
    
            //vue实例
            new Vue({
                el:"#root",
                components:{
                  'todo-tem':todoItem
                },
                data:{
                    inputValue:'',
                    list:[]
                },
                methods:{
                    sub:function () {
                        //加入数组
                        this.list.push(this.inputValue);
                        //恢复文本框内容为空
                        this.inputValue = '';
                    }
                }
            });
        </script>
    </body>
    </html>
  • 相关阅读:
    区间树
    最大流
    单源最短路径
    散列表
    最小生成树
    软件体系结构2
    软件体系结构
    Leetcode 687.最长同值路径
    Leetcode 686.重复叠加字符串匹配
    Python测试框架
  • 原文地址:https://www.cnblogs.com/jiangshiguo/p/11164963.html
Copyright © 2011-2022 走看看