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

足球指数即时:你可能沒用過的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} 大乐乐透牛彩网 宇都宫紫苑45部合集 四川麻将单机版免费 上海体彩十一选走势图一牛 支付宝天天红包赛12000 河南快赢481 3d开机号牛彩网 山东十一选五前三走 一分赛车开奖结果软件 辽宁十一选五 股票融资10万利息多少 东京热 吉泽明步 哈尔滨麻将 黑龙江十一选五复式 秒速牛牛官网下载 11选5浙江