孙空空的Vue之路-Day02-计算属性和监视

最新推荐文章于 2024-10-08 20:57:52 发布

小....赵

最新推荐文章于 2024-10-08 20:57:52 发布

阅读量97

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_38817451/article/details/109250054

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算属性和监视</title>
</head>
<body>
<div id="demo">
    姓：<input type="text" placeholder="姓氏~" v-model="firstName" /><br>
    名：<input type="text" placeholder="名字~" v-model="lastName" /><br>
    (单向发生改变)输入框和姓保持一致:<input type="text" placeholder="和姓氏保持一致" v-model="relative_firstname" /><br>
    (单向发生改变)输入框和名保持一致:<input type="text" placeholder="和名字保持一致" v-model="relative_lastname" /><br>
    (双向发生改变):<input type="text" placeholder="和姓名双向发生改变" v-model="re_fl" /><br>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    new Vue({
      el:'#demo',
      data:{
          firstName:'蒙奇D',
          lastName:'路飞'
      },

      //计算属性的方法来实现
      computed: {
          relative_firstname() {
              return this.firstName
          },
          // relative_lastname() {
          //     return this.lastName
          // }

          re_fl: {
              //get() set()方法
              get() {
                return this.firstName + '-' + this.lastName
              },

              set(value) {
                  const names = value.split('-')
                  this.firstName = names[0]
                  this.lastName = names[1]
              }
          }
      },

      //通过监视的方法来实现
      watch: {
          lastName:function(value) {
              //只要lastName输入值，就将值赋予relative_lastname
              //初始化显示的值，刚开始并不会显示在relative_lastname上
              this.relative_lastname = this.lastName
          }
      }
    })
</script>
</body>
</html>

v-model就是vue的双向绑定的指令，能将页面上控件输入的值同步更新到相关绑定的data属性，也会在更新data绑定属性时候，更新页面上输入控件的值。