第五节 模板、指令与修饰符

2020-08-25  本文已影响0人  darkTi

一、模板的三种写法

第一种.png
第二种.png
第三种.png

二、内容展示

1、内容展示


image.png

2、 循环


v-for.png

三、指令

directive.png
修饰符.png

四、.sync修饰符

1、 .sync修饰符就是“同步”的意思,文档里是这样说的;就是子组件改变prop时,父组件的值也会同步变化;


image.png
<div id="app">
  VV银行,你的余额:{{allMoney}}
  <Deposit :my-money="allMoney" @update:money=" allMoney = $event "/>
// 上面这句和下面的意思一样,这就是.sync的用法
 <Deposit :my-money.sync="allMoney"  />
</div>
Vue.component('Deposit',{
  template:`<div>我的余额有:{{myMoney}}
<button @click="save">存100</button>
</div>`,
  props:['myMoney'],
  methods:{
    save(){
     //!!!这里一定要写成“update:props变量名”
      this.$emit('update:myMoney',this.myMoney + 100) 
    }
  }
})
new Vue({
  data: {
    allMoney: 10000
  }
}).$mount("#app")
image.png image.png
上一篇 下一篇

猜你喜欢

热点阅读