记录生活

https://github.com/dwfg

vue的单向数据流和双向绑定解释

Vue 在不同组件间强制使用单向数据流。这使应用中的数据流更加清晰易懂。数据只能从父组件到子组件或是反向。


双向绑定v-model是同时实现bind attribute(value)和Listen to event(input)

以下给出v-model和手动双向绑定的代码

<template>
  <div class="card my-1">
    <div class="card-body">
      <div class="text-success">Two way data binding <br>*bind to attribute(value) & listen to event(input) at the same time</div>
      <p>{{ title }}</p>
      <input type="text" class="form-control" v-model="title">
      <p class="text-success">*Manual two way binding</p>
      <p>{{ test }} </p>
      <input type="text" :value="test" @input="listen" class="form-control">
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        title: "title",
        test: "test"
      }
    },
    methods: {
      listen(e) {
        this.test = e.target.value
      }
    }
  };

</script>


阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/LeonBec/article/details/78019486
个人分类: 前端
上一篇把vue-cli当做日常自动化工具
下一篇javascript的变量类型总结
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭