zoukankan      html  css  js  c++  java
  • 二、vue基础--计算属性和监听器

    1.一些操作需要计算后才能得到的用计算属性,需要放在computed属性中代码如下:

    <div id='app'>
      <div>
        <label>宽:</label>
        <input type="text" v-model:value="width">
      </div>
      <div>
        <label>高:</label>
        <input type="text" v-model:value="heigth">
      </div>
      <div>面积:{{area}}</div>
    </div>
      <script>
        new Vue({
          el:'#app',
          data:{
            0,
            heigth:0
          },
          computed:{
            area(){
            return this.heigth * this.width
          }
        }
      })
    </script>

    2.计算属性的set:有set必须要写get,一下是省市区填写解析出来,或者是分别填写省市区拼接到汇总省市区代码如下:

    <div id='app'>
      <div>
        <label>省:</label>
        <input type="text" v-model:value="province">
      </div>
      <div>
        <label>市:</label>
        <input type="text" v-model:value="city">
      </div>
      <div>
        <label>区:</label>
        <input type="text" v-model:value="district">
      </div>
      <div>
        <label>地址:</label>
        <input type="text" v-model="address">
      </div>
    </div>
    <script>
      new Vue({
        el:'#app',
        data:{
          province:"",
          city:"",
          district:""
        },
        computed:{
        address:{
          get(){
          let result=""
          if(this.province){
            result += this.province+""
        }
          if(this.city){
            result += this.city+""
        }
          if(this.district){
            result += this.district+""
        }
          return result
        },
        set(value){
          let result = value.split(/省|市|区/)
          if(result && result.length>0){
            this.province = result[0]
        }
          if(result && result.length>1){
            this.city = result[1]
        }
          if(result && result.length>2){
            this.district = result[2]
        }
      }
      }
      }
      })
    </script>

    3.监听属性:监听属性需要放到watch中,代码如下:

    <div id='app'>
      <div>
        <input type="text" v-model:value="keyword">
      </div>
      <div>
        <span>推荐的关键字是:</span>
        {{result}}
      </div>
    </div>
    <script>
      new Vue({
        el:'#app',
        data:{
          keyword:"",
          result:""
        },
        watch:{
          keyword(newvalue,oldvalue){
            this.result="正在加载中。。。"
            setTimeout(() => {
              this.result="推荐的结果是:"+newvalue
              },1000)
          }
        }
      })
    </script>
  • 相关阅读:
    Asp.Net Core使用Nginx实现反向代理
    在Liunx上搭建FTP并配置用户权限
    Asp.Net Core 使用Docker进行容器化部署(二)使用Nginx进行反向代理
    Asp.Net Core 使用Docker进行容器化部署(一)
    .Net Core On Liunx 环境搭建之 Docker 容器和Nginx
    .Net Core On Liunx 环境搭建之安装Mysql8
    .NET Core On Liunx环境搭建之MongoDB
    canvas图像处理汇总
    mysql数据库高并发处理
    nginx 重发机制导致的重复扣款问题
  • 原文地址:https://www.cnblogs.com/Mr-Simple001/p/12077572.html
Copyright © 2011-2022 走看看