精华内容
下载资源
问答
  • vue点击按钮实现添加组件(内容--类似于添加购物车效果)
    千次阅读
    2020-06-03 17:01:30

    vue点击按钮添加组件,类似于添加购物车效果。

    首先在template里

    <template>
      <div class="hello">
        <header>
          <div>
            <input type="text" v-model="child" />
            <button @click="addChild">点击添加儿童</button>
          </div>
          <div>
            <input type="text" v-model="man" />
            <button @click="addMan">点击添加成人</button>
          </div>
          <div>
            <input type="text" v-model="old" />
            <button @click="addOld">点击添加老人</button>
          </div>
        </header>
    
        <section>
          <ul>
            <template v-for="(item,index) in list">
              <span :key="index" v-if="item.type === 'child'">
                <p>车票 + 儿童票</p>
                <label for="">姓名:<input type="text"></label>
                <br>
                <label for="">手机号:<input type="text"></label>
                <br>
                <label for="">身份证:<input type="text"></label>
              </span>
              <span :key="index" v-else-if="item.type === 'man'">
                <p>车票 + 成人票</p>
                <label for="">姓名:<input type="text"></label>
                <br>
                <label for="">手机号:<input type="text"></label>
                <br>
                <label for="">身份证:<input type="text"></label>
              </span>
              <span :key="index" v-else>
                <p>车票 + 老人票</p>
                <label for="">姓名:<input type="text"></label>
                <br>
                <label for="">手机号:<input type="text"></label>
                <br>
                <label for="">身份证:<input type="text"></label>
              </span>
            </template>
          </ul>
        </section>
      </div>
    </template>
    

    然后是script

    <script>
    export default {
      name: 'HelloWorld',
      data() {
        return {
          child: 0,
          man: 0,
          old: 0,
          list: []
        }
      },
      methods: {
        addChild() {
          this.child++
          this.list.push({
            type: 'child'
          })
        },
        addMan() {
          this.man++
          this.list.push({
            type: 'man'
          })
        },
        addOld() {
          this.old++
          this.list.push({
            type: 'old'
          })
        }
      }
    }
    </script>
    

    最后呢也就是一个简易的样式

    <style scoped>
    header div {
      margin-top: 20px;
    }
    </style>
    

    样式呢,自己调就好了。效果图是静态的我就不上传了,感兴趣的朋友可以运行起来看效果。

    更多相关内容
  • 主要介绍了vue点击按钮动态创建与删除组件功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • Vue.extend( options ) 参数: {Object} options ...示例:子组件 byMount.vue <div>mount content test!! [removed] import Vue from 'Vue'; export default { name: 'bycount', data () { r
  • vue中通过点击按钮添加组件的方法: 1.给按钮添加点击事件: <div class="btn btn2" data-num="2" @click="networkMonitor"><span>管网监控</span></div> 2.导入组件 import equipment ...

    在vue中通过点击按钮添加组件的方法:
    1.给按钮添加点击事件:

    <div class="btn btn2" data-num="2" @click="networkMonitor"><span>管网监控</span></div>
    

    2.导入组件

      import equipment from "@/views/gis/equipment/index";
    

    3.添加组件(在export default中写上以下代码)

     components:{equipment}

    4.在页面中需要显示的位置引入组件,并用v-if控制其显隐

    <equipment v-if="showCom"></equipment>
    

    5.在data中定义显隐属性,并在点击事件的方法中控制其显隐

     showCom:false,
     networkMonitor(){
            this.showCom =  true
          },
    

    代码示例如下:
    在这里插入图片描述
    在这里插入图片描述

    展开全文
  • 3、父组件的notify的方法在处理时,使用了$refs.child把事件传递给子组件的parentMsg方法,同时携带着父组件中的参数msg  4、子组件接收到父组件的事件后,调用了parentMsg方法,把接收到的msg放到message数组中 父...
  • vue 通过按钮点击动态添加组件

    千次阅读 2019-08-15 15:52:11
    本文链接:... 效果如下 思路 v-for循环+数组组件 第一步、定义一个组件,这个组件里面是一个html代码 ... Vue.component('dom', { template: '<div>我是一个组件</div&...

     

     

    本文链接:https://blog.csdn.net/qq_37591637/article/details/90199127

    效果如下

     思路

      v-for循环+数组组件


    第一步、定义一个组件,这个组件里面是一个html代码

     
    1. Vue.component('dom', {

    2. template: '<div>我是一个组件</div>'

    3. })

    第二步、在页面上用v-for循环遍历一个空的数组

    第三步、在这个里面放一个定义的组件

     
    1. <div v-for="(d,index) in counter" :key="index">

    2. <dom></dom>

    3. </div>

     

    第四步、点击事件,添加数组元素

     整体的功能实现流程如下

     

    展开全文
  • 要求点击修改按钮之后部分输入框由禁用状态变为可用状态。下面我给大家分享一段实例代码基于vue组件点击按钮后修改输入框的状态,需要的的朋友参考下
  • 主要介绍了Vue form表单动态添加组件实战案例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • Vue】动态添加组件的两种实现-附件资源
  • VUE 实现点击按钮,动态加载组件

    千次阅读 2020-12-11 08:36:02
    需求:每点击一次添加按钮,按照已有的模板动态添加一个 废话不多说,直接上代码!!!! A.vue(父组件) <div class="filter-container" style="margin-top: 25px"> <el-button class="filter-item" ...

    需求:每点击一次添加按钮,按照已有的模板动态添加一个
    在这里插入图片描述
    废话不多说,直接上代码!!!!

    A.vue(父组件)

    <div class="filter-container" style="margin-top: 25px">
                    <el-button
                        class="filter-item"
                        type="primary"
                        icon="el-icon-plus"
                        size="small" plain
                        @click="handleAdd">
                        添加
                    </el-button>
                    <model-props
                        style="margin-top: 25px"
                        v-for="(p, index) in form.properties"
                        :key="index"
                        :ref="`properties_${index}`"
                        :params="p"></model-props>
                </div>
    <script>
    
    import modelProps from './model_props.vue'
    export default {
    	components: {
            modelProps
        },
    data() {
    	return {
    		form: {
    			properties: [],
    		}
    	}
    }
    }
    </script>
    

    model_props.vue(子组件)

    <template>
        <el-card>
            <el-form
                :model="propertiesForm"
                label-width="145px">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="key:">
                            <el-input
                                size="small"
                                maxlength="50"
                                v-model="propertiesForm.propertiesKey"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="名称:">
                            <el-input
                                size="small"
                                maxlength="50"
                                v-model="propertiesForm.title"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                        </el-form>
        </el-card>
    </template>
    
    <script>
        export default {
            name: 'model-props',
            props: {
                show: {
                    default: false
                },
                params: {
                    requerid: true
                }
            },
            data() {
                return {
                    propertiesForm: {
                        propertiesKey: '',
                    },
                 
                }
            },
            watch: {
                params: {
                    handler: function(newValue) {
                        this.$utils.assignKey(this.propertiesForm, newValue)
                    },
                    deep: true,
                }
            },
            mounted() {
                this.$utils.assignKey(this.propertiesForm, this.params)
            },
            method: {
                sendForm(fn) {
                    fn(this.propertiesForm)
                }
            }
    
        }
    </script>
    
    <style>
    </style>
    
    
    展开全文
  • vue中使用clipboard.js 时候发现一个问题,就是如果不是input或者button 按钮的话,则复制不成功,使用步骤如下: 1、引入clipboard.js,方法如下: 第一种直接npm安装:npm install clipboard –save 第二种:...
  • 实现思路:首选需要设置一个属性为true(show:true),然后使用v-if把show属性绑定到要显示与内容的标签身上,最后给点击按钮添加点击事件,当show属性为true就设置为false,为false就设置为true(this.show = !...
  • vue点击按钮动态创建与删除组件

    千次阅读 2019-12-27 14:28:12
    点击左侧组件按钮创建对应的不同的组件,并在右侧区域展示 点击右侧创建的组件中的删除按钮,删除对应的组件 删除对应的组件之后,下方的组件位置自动上移 效果图: 代码: 父组件代码(去除了css样式代码): ...
  • 兼容Vue 2.x,其灵感来自https://tympanus.net/Development/ProgressButtonStyles/上显示的按钮动画/ Install $ npm install vue-progress-button --save用法组件内部:要获取组件的最基本版本进度按钮 按钮 可以用...
  • 1.首先在按钮添加事件且带有两个参数 参数一是item,参数二是子路由组件页面(也就是跳转后的页面) 2.在生命周期函数created()中添加路由 3.在方法中进行路由传值
  • 利用Vue的单文件组件模式实现列表项目的添加和删除功能。构建一个完整的项目,完成组件之间的分离,以及子组件与父组件的数据通信
  • vue 点击按钮增加一行的方法

    千次阅读 2020-12-23 04:41:45
    vue 点击按钮增加一行的方法如下所示:data() {return {customized_descs: [1],}},不要js,jq里面的方法了。以上这篇vue 点击按钮增加一行的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家...
  • vue中在父组件点击按钮触发子组件的事件

    千次阅读 多人点赞 2020-10-24 21:57:28
    3、父组件的notify的方法在处理时,使用了$refs.child把事件传递给子组件的parentMsg方法,同时携带着父组件中的参数msg 4、子组件接收到父组件的事件后,调用了parentMsg方法,把接收到的msg放到message数组中 父...
  • vue点击按钮跳转页面

    千次阅读 2022-02-22 15:36:13
    1.给按钮添加点击事件 <button @click="register">登录</button> 2.实现跳转 在methods里面写入一下代码 register () { //跳转到上一次浏览的页面 this.$router.go(-1) //指定跳转的地址 this.$...
  • vue 动态添加组件

    千次阅读 2020-11-04 15:32:59
    vue 利用数组循环动态添加组件 1. 实现效果: 当第一个框输入内容之后,点击添加,动态添加第二个输入框,以此类推; 2. 实现思想: 构建需要动态添加的模板,利用 v-for 循环模板。 通过 index 判断当前模板,绑定...
  • 组件支持多个操作按钮,因此您可以根据需要添加任意多个操作。 它将触发事件t FAB Vue浮动动作按钮。 该组件支持多个操作按钮,因此您可以根据需要添加任意多个操作。 单击每个事件时,它将向父事件触发一个事件。...
  • vue项目中 经常会有用户权限的问题,根据不同的用户角色进行不同的组件的显示,就是在需要哪一个组件的时候显示出来。vue中可以使用 <component :is="组件名" /> 来实现。 <template> <div ...
  • vue点击按钮预览图片,pdf,文件

    千次阅读 2021-11-19 15:48:29
    vue点击图片,pdf,文件,预览 <div style="width: 50%; display: inline-block; vertical-align: bottom"> <div class="tit-top">上传图片</div> <div style="min-height: 151px"> <...
  • 产品开发用的是 vue, 经同事介绍使用了vue-video-player 视频播放插件,通过 demo 案例很快实现了视频播放效果   <video-player class=vjs-custom-skin ref=videoPlayer1 :options=playerOptions :...
  • 开发过程遇到了一个问题,就是我的 router-view 里面渲染出来的组件输入数据之后,我点击 路由视图外边的导航栏 router-link 按钮,可以实现清除 router-view 里面的数据,也就是使组件重新渲染。vm.$forceUpdate()...
  • 可以使用@Keyup.enter=" "来实现点击回车键来完成提交的效果,但是注意,如果使用原生的input标签可以,如果使用外部引入的组件则会无效,需要加上native 我这里使用的element的input组件加上native就可以正常...
  • 显示演示的Vue组件和一个“显示代码”按钮来扩展源代码 安装 $ npm install vue-demo-collapse 用法 创建一个组件,将您的演示传入,并将该演示的源代码包装在组件中。 < script > <!-- ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 31,593
精华内容 12,637
关键字:

vue点击按钮添加组件