亚洲最大看欧美片,亚洲图揄拍自拍另类图片,欧美精品v国产精品v呦,日本在线精品视频免费

  • 站長(zhǎng)資訊網(wǎng)
    最全最豐富的資訊網(wǎng)站

    一文詳解vue怎么實(shí)現(xiàn)v-model(附代碼示例)

    本篇文章給大家?guī)砹岁P(guān)于vue的相關(guān)知識(shí),其中主要給大家介紹了我們?yōu)槭裁词褂胿-model?用vue怎么實(shí)現(xiàn)v-model的,感興趣的朋友一起來看一下吧,希望對(duì)大家有幫助。

    一文詳解vue怎么實(shí)現(xiàn)v-model(附代碼示例)

    • 為什么使用v-model? v-model作為雙向綁定指令也是vue兩大核心功能之一,使用非常方便,提高前端開發(fā)效率。在view層,model層相互需要數(shù)據(jù)交互,即可使用v-model。
    • v-model的原理簡(jiǎn)單描述

    v-model主要提供了兩個(gè)功能,view層輸入值影響data的屬性值,data屬性值發(fā)生改變會(huì)更新view層的數(shù)值變化。

    其核心就是,一方面modal層通過defineProperty來劫持每個(gè)屬性,一旦監(jiān)聽到變化通過相關(guān)的頁面元素更新。另一方面通過編譯模板文件,為控件的v-model綁定input事件,從而頁面輸入能實(shí)時(shí)更新相關(guān)data屬性值。

    • v-model是什么 v-model就是vue的雙向綁定的指令,能將頁面上控件輸入的值同步更新到相關(guān)綁定的data屬性,也會(huì)在更新data綁定屬性時(shí)候,更新頁面上輸入控件的值。

    vue2.0實(shí)現(xiàn)方法

    • 父組件

    <template>   <div id="app">     {{username}} <br/>     <my-input type="text" v-model="username"></my-input>   </div> </template>  <script> import myinput from './components/myinput' export default {   name: 'App',   components:{       myinput   },   data(){     return {       username:''     }   }  } </script>
    登錄后復(fù)制

    • myinput.vue:

    <template>     <div class="my-input">         <input type="text" class="my-input__inner" @input="handleInput"/>     </div> </template>  <script>     export default {         name: "myinput",         props:{             value:{ //獲取父組件的數(shù)據(jù)value                 type:String,                 default:''             }         },         methods:{             handleInput(e){                 this.$emit('input',e.target.value) //觸發(fā)父組件的input事件             }         }     } </script>
    登錄后復(fù)制

    最常見的還有一種事控制模態(tài)框的展示與關(guān)閉,我們也可以用v-model 以element 的 el-dialog組件為例子

    • App.vue

    <template>     <div>         <kmDialog             v-model="showDialog"         >         <el-button @click="show">點(diǎn)我</el-button>     </div> </template> <script>     import kmDialog from 'KmDialog.vue'     export default {         components: {             KmDialog         }         data () {             return {                 showDialog: false             }         },         methods: {             show() {                 this.showDialog = true             }         }     } </script>
    登錄后復(fù)制

    • KmDialog.vue

    <template>     <el-dialog         :title="isEdit ? '編輯設(shè)備' : '新增設(shè)備'"         :visible.sync="value"         width="40%"         @close="cancel"       >         <span>這是一段信息</span>     </el-dialog> </template> <script>     export default {         props: {             value: {                 default: false,                 type: Boolean             }         },         methods: {             cancel() {                 this.$emit('input', false)             }         }     } </script>
    登錄后復(fù)制

    推薦學(xué)習(xí):《vue.js視頻教程》

    贊(0)
    分享到: 更多 (0)
    網(wǎng)站地圖   滬ICP備18035694號(hào)-2    滬公網(wǎng)安備31011702889846號(hào)