現在是:
廣告熱線:  |  設為首頁 | 加入收藏
登陸用戶名:
密碼:
您現在的位置北京足球指数 > 游戲 > >正文內容

体球网足球指数:你可能沒用過的v-model 時定制 prop 和 event

來源: 發布時間:2020-03-23 07:08:30 閱讀:-

北京足球指数 www.zwtnp.com.cn 大家可能在使用vue的時候已經很熟悉v-model指令了,但是有定制過prop和event嗎?下面咱們來簡單的說一說。

vue允許一個自定義組件在使用 v-model 時定制 prop 和 event。默認情況下,一個組件上的 v-model 會把 value 用作 prop 且把 input 用作 event,但是一些輸入類型比如單選框和復選框按鈕可能想使用 value prop 來達到不同的目的。使用 model 選項可以回避這些情況產生的沖突。

下面通過src引入vue.js文件的方式來簡單實現一下:

<!DOCTYPE html>

<html lang="zh-CN">

<head>

<meta charset="UTF-8">

<title>v-model</title>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>

<body>

<div id="app">

<my-input v-model="isChecked" value="some value">喜歡學習vue</my-input>

</div>

</body>

</html>

<script src="./vue.js"></script>

<script>

Vue.component('my-input', {

template: `<div>

<input type="checkbox" :checked="check" @change="$emit('change',$event.target.checked)">

<slot></slot>

</div>`,

model: {

prop: 'check',

event: 'change'

},

props: {

value: String,

check: 0 // isChecked的值會傳遞給model指定prop 'check'

}

})

var app = new Vue({

el: '#app',

data: {

isChecked: 0

},

watch: {

isChecked: function(val) {

console.log('val', val); // 選中/取消選中checkbox會改變isChecked的值

}

}

})

</script>

通過手動選中/取消選中checkbox會觸發watch監聽,從而不斷打印isChecked的當前值。也可以在F12控制臺通過給app.isChecked = true/false,來查看checkbox選中和取消選中的效果。至此一個定制prop和event的示例已經完成~~~

最后給大家準備了一些前端資料分享給大家,如圖~

懇請大家幫忙轉發,然后關注走一走,私信我給大家發送資料鏈接~非常感謝~

(正文已結束)

推薦閱讀:查找我的iphone在哪

免責聲明及提醒:此文內容為本網所轉載企業宣傳資訊,該相關信息僅為宣傳及傳遞更多信息之目的,不代表本網站觀點,文章真實性請瀏覽者慎重核實!任何投資加盟均有風險,提醒廣大民眾投資需謹慎!

網站簡介 - 聯系我們 - 營銷服務 - 老版地圖 - 版權聲明 - 北京足球指数
Copyright.2002-2019 北京足球指数 版權所有 本網拒絕一切非法行為 歡迎監督舉報 如有錯誤信息 歡迎糾正
{ganrao} 体彩6十1中奖对照表 30选5基本走势图 淘宝快3 上原亚衣作品 今天上证综合指数 买平特一肖能赢吗 遇乐拱猪下载 幸运快3单双大小网站 四川快乐十二任五遗漏 青海11选5号码走势图 浙江20选5走势图带连线图 宁夏体彩11选五开奖查询 手机java游戏美女麻将 最简单自制刮刮乐 四川麻将教程 捉鸡麻将技巧