1-7 计算属性与表单

computed

计算属性和methods区别

我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。

<template>
    <div class="event">
        <p>{{msgRe}}</p>
        <p>{{msgRe}}</p>
    </div>
</template>
<script>
export default {
  data(){
      return{
          message:"hello"
      }
  },
  computed:{
      msgRe(){
          return this.message.split('').reverse().join('');
      }
  }
  
}
</script>
<style>

</style>

效果图：

侦听器

虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

表单输入绑定

v-model：双向数据绑定

<template>
    <div>
        <input v-model="msg" type="text"/>
        <p>{{msg}}</p>
    </div>
</template>
<script>
export default {
  name:"formdata",//当前组件的名称
  data(){
      return{
         msg:''
      }
  },
  watch:{
      //如果'msg'发生改变，这个函数就会运行
      msg:function(data){
          console.log(data)
      }
  }
}
</script>
<style scoped>

</style>

修饰符:

.lazy：v-model 在每次 input 事件触发后将输入框的值与数据进行同步。你可以添加 lazy 修饰符，从而转变为使用 change 事件进行同步

<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg" >

.munber：如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符

.trim:如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符

1-7 计算属性与表单

猜你喜欢