VUE彈窗的兩種實現方式

2022-06-14 20:42:11 字數 1101 閱讀 9794

方法一 使用.sync修飾符

element就是使用的這種方式,實現方式如下:

父元件:

test-model>

div>

template>

import testmodel from 'src/components/testmodel'

export default

},components:

}script>

style>

子元件:

button>

div>

template>

export default

},props: ["show"],

methods: },}

script>

style>

子元件通過this.$emit("update:show",false);  可以直接將父元件傳過來的show值改變,從而達到顯示隱藏的目的。

方法二  使用v-model

父元件test-model>

div>

template>

import testmodel from 'src/components/testmodel'

export default

},components:

}script>

style>

子元件button>

div>

template>

export default

},props: ["value"],

model: ,

methods: },}

script>

style>

官方文件裡有寫,乙個元件上的v-model缺省會利用名為value的 prop 和名為input的事件,但是像單選框、核取方塊等型別的輸入控制項可能會將value特性用於不同的目的。model選項可以用來避免這樣的衝突,所以上面的子元件裡,我們用balabala來替換掉了原本的input事件,所以在$emit的時候,裡面的事件名應為balabala,否則預設為input.

vue下拉列表的兩種實現方式

select v model form.columetype placeholder 字段型別 option v for item,index in columetypearr key index label item.label value item.value option select 這種方...

vue建立專案(兩種方式)

建立專案的前提是 已經安裝成功vue cli,安裝vue cli的詳細 請檢視博文 1.第一種方式 命令方式 vue create 專案名稱 注意專案名稱不要是中文 大寫字母,例項如下 1.vue create demo 2.cd demo 3.npm run serve 2.第二種方式 視覺化介面...

兩種方式實現checkBox readonly功能

今天在做開發的時候遇到了這樣乙個問題 有乙個checkbox選項是不能被改變的。但是checkbox又是沒有readonly屬性的,這個時候我就想到了另外乙個屬性disabled,但是disabled的物件是不能提交到後台的,所以這個又被排除掉了。想了想,只能新增事件來搞定了。於是在checkbox...