zoukankan      html  css  js  c++  java
  • vue自定义v-modal

    自定义输入框v-modal,2.0写法

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>
    </head>
    
    <body>
        <div id="app">
            <my-input v-model="msg" />
        </div>
        <script type="text/javascript">
            Vue.component('myInput', {
                template: '<input :value="value" ref="ipt" @input="change_input_handle" />',
                props: {
                    value: String
                },
                methods: {
                    change_input_handle() {
                        this.$emit('input', this.$refs.ipt.value);
                    }
                }
            })
            new Vue({
                el: "#app",
                data() {
                    return {
                        msg: '测试'
                    }
                },
                watch:{
                    msg(value){
                        console.log(value)
                    }
                }
            })
        </script>
    </body>
    
    </html>

    自定义v-modal,3.0写法

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>
    </head>
    
    <body>
        <div id="app">
            <my-input v-model="msg" />
        </div>
        <script type="text/javascript">
            Vue.component('myInput', {
                template: '<input :value="modelValue" ref="ipt" @input="change_input_handle" />',
                props: ['modelValue'],
                methods: {
                    change_input_handle() {
                        this.$emit('update:modelValue', this.$refs.ipt.value);
                    }
                }
            })
            new Vue({
                el: "#app",
                data() {
                    return {
                        msg: '测试'
                    }
                },
                watch:{
                    msg(value){
                        console.log(value)
                    }
                }
            })
        </script>
    </body>
    
    </html>
    

      

  • 相关阅读:
    docker镜像文件导入与导出,支持批量
    配置和启动Kubernetes服务
    在CentOS 7 上安装docker
    安装CentOS7精简版后的配置工作
    Docker镜像加速
    docker命令不需要敲sudo的方法
    建立时间和保持时间(setup time 和 hold time)
    时序收敛:基本概念
    GitHub: Windows 下的简单使用
    K-means算法和矢量量化
  • 原文地址:https://www.cnblogs.com/uimeigui/p/14326020.html
Copyright © 2011-2022 走看看