精华内容
下载资源
问答
  • Vue.js教程之计算属性

    2020-12-29 03:16:48
    当你在模板里把数据绑定到一个计算属性上时,Vue 会在其依赖的任何值导致该计算属性改变时更新 DOM。这个功能非常强大,它可以让你的代码更加声明式、数据驱动并且易于维护。 通常情况下,使用计算属性会比使用过程...
  • ...vue中关于计算属性 就是当a,b(关联着a),当a改变后 b也要跟着改变 这个时候就可以使用计算属性了,watch 也有这样的功能,watch和计算属性的 区别 大家可以网上查询一下资料,这不是本次的重...

    这是一个系列文章 之前的系列文章地址:https://blog.csdn.net/www_share8/category_9877844.html

    今天 我们来学习一下计算属性 和watch

    vue中关于计算属性 就是当a,b(关联着a),当a改变后 b也要跟着改变 这个时候就可以使用计算属性了,watch 也有这样的功能,watch和计算属性的 区别 大家可以网上查询一下资料,这不是本次的重点 。

    先来看一下 vue中是如下写计算属性的和watch

    <template>
      <div class="tt">
        <el-input v-model="msg"></el-input>
        <div><span>我是计算属性内容,在输入后面添加hell--</span>{{inputContent}}</div>
        <div><span>我是watch 在输入内容后 加 world--</span>{{inputWatch}}</div>
      </div>
    </template>
     
    <script>
    export default {
      name: 'tt',
      data () {
        return {
          msg:'',      
          inputWatch: ''
        }
      },
      computed: {
        inputContent: function () {
          return this.msg + ' hello'
        }
      },
      watch: {
        msg: {
          handler (newData, oldData) {
            this.inputWatch = newData + ' world'
          },
          immediate: true
        }
      }
    }
    </script>


    ts 计算属性(get 计算属性名,引用和之前的一样)

    在来看一下 typeScript中 由于vue教程中提到了,计算属性默认只有 getter,不过在需要时你也可以提供一个 setter:

    说明计算属性是直接可以使用 get set 来设置了 这就是下面的这样的ts代码了

    <template>
      <div class="hello">
        <el-input v-model="msg"></el-input>
        <div><span>我是计算属性内容,在输入后面添加hell--</span>{{inputContent}}</div>
      </div>
    </template>
     
    <script lang="ts">
    import { Component, Prop, Vue } from "vue-property-decorator";
     
    @Component
    export default class HelloWorld extends Vue {
      private msg: string = "测试";
      get inputContent() {
        return this.msg + " hello";
      }
    }
    </script>


    ts 中watch 代码如下

    首先 从vue-property-decorator引入watch,

    @Watch('监听内容',{是否需要深度监听的内容})  后面跟一个回调函数 名字(叫什么都可以)

    <template>
      <div class="hello">
        <el-input v-model="msg"></el-input>
        <div><span>我是watch 在输入内容后 加 world--</span>{{inputWatch}}</div>
      </div>
    </template>
     
    <script lang="ts">
    import { Component, Prop, Vue, Watch } from "vue-property-decorator";
     
    @Component
    export default class HelloWorld extends Vue {
      private msg: string = "测试";
      private inputWatch: string = "";
     
      @Watch("msg",{immediate: true, deep: true})
      onChangeValue(newVal: string, oldVal: string) {
        this.inputWatch = newVal + " world";
      }
    }
    </script>


    总结一下,对比vue 计算属性变成了get  其他都没有变,watch 全新的写法 需要学习多练习

    展开全文
  • //计算属性 computed: { fullName: function() { return this.firstName + " " + this.lastName; } }, //监听器 watch: { // firstName: function() { // this.count++ // }, // lastName: function() {...

    基础例子:

        <div id="example">
            <p>A message: "{{message}}"</p>
            <p>B reversed message: "{{reversedMessage}}"</p>
        </div>
    
        <script>
            var vm = new Vue({
                el: "#example",
                data: {
                    message: 'hello',
                },
                computed: {
                    reversedMessage: function() {
                        return this.message.split('').reverse().join('')
                    }
                }
            })

    输出结果:

    A message hello

    B reversed message olleh

    例子2:

        <div id="example">
            {{ fullName }}
        </div>
    
        <script>
            var vm = new Vue({
                el: "#example",
                data: {
                    firstName: 'Foo',
                    lastName: 'Bar',
                    fullName: 'Foo Bar'
                },
                watch: {
                    firstName: function(val) {
                        this.fullName = val + ' ' + this.lastName
                    },
                    lastName: function(val) {
                        this.fullName = this.firstName + ' ' + val
                    }
                }
    
            })
        </script>
        <div id="example">
            {{ fullName }}
        </div>
    
        <script>
            var vm = new Vue({
                el: "#example",
                data: {
                    firstName: 'Foo',
                    lastName: 'Bar',
                },
                computed: {
                    fullName: function() {
                        return this.firstName + ' ' + this.lastName;
                    }
                }
    
            })
        </script>

    以上两段代码等同.

    二、监听器

        <div id="root">
            姓:<input type="text" v-model="firstName"> 名:
            <input type="text" v-model="lastName">
            <br>
            <div>{{fullName}}</div>
            <div>{{count}}</div>
        </div>
    
        <script>
            new Vue({
                el: "#root",
                data: {
                    firstName: "",
                    lastName: "",
                    count: 0,
    
                },
                //计算属性
                computed: {
                    fullName: function() {
                        return this.firstName + " " + this.lastName;
                    }
                },
                //监听器
                watch: {
                    // firstName: function() {
                    //     this.count++
                    // },
                    // lastName: function() {
                    //     this.count++
                    // }
                    fullName: function() {
                        this.count++
                    }
                }
            })
        </script>

     

    展开全文
  • vue3.0中使用计算属性时报错

    千次阅读 2020-07-07 20:56:24
    vuex是单项数据流,在计算属性中只有get可以获取参数值,没有set不能改变参数值。 crowdmodel:{ get(){ return this.$store.state.crowdmodel; }, set(val){ this.$store.state.crowdmodel; } } 解决方法...

    原因:在组件使用了双向绑定,绑定的值是vuex的state的一个值。vuex是单项数据流,在计算属性中只有get可以获取参数值,没有set不能改变参数值。

     crowdmodel:{
          get(){
            return this.$store.state.crowdmodel;
          },
          set(val){
            this.$store.state.crowdmodel;
          }
        }

    解决方法:

    • 在computed属性中添加set
    • 将v-model改成 :value
    展开全文
  • 基于vue+ts的vuex五个属性基础用法

    千次阅读 2021-01-12 11:52:55
    getters 从基本数据(state)派生的数据,相当于state的计算属性,在index.ts(js)中在getters模块中定义计算属性,在页面中通过$store.getters.计算属性名字进行调用 定义 getters:{ //计算属性 getMyName(state){ ...

    什么是Vuex

    VueX 是一个专门为 Vue.js 应用设计的状态管理架构,统一管理和维护各个vue组件的可变化状态(可以理解为 vue 组件里的某些 data )。
    它采用集中式存储管理应用的全部组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
    Vue有五个核心概念,state, getters, mutations, actions, modules。

    1. state

    state是Vuex的基本数据,用来存储变量
    定义

    export default new Vuex.Store({
      state: {
        count:1,
        students:[
          {id:110,name:"zhou",age:18},
          {id:111,name:"ti",age:25},
          {id:112,name:"qi",age:21},
          {id:113,name:"stu",age:19}
        ]
      }
      })
    

    调用

      //通过调用$store.state来输出需要的变量
      <h2>store的值:{{$store.state.count}}</h2>
      <h3 v-for="item in $store.state.students" :key="item.id">
         <h4>id:{{item.id}},姓名:{{item.name}},年龄:{{item.age}}</h4>
     </h3>
    

    2. getters

    从基本数据(state)派生的数据,相当于state的计算属性,在index.ts(js)中在getters模块中定义计算属性,在页面中通过$store.getters.计算属性名字进行调用
    定义

      getters:{
        //计算属性
        getMyName(state){
        //state参数是固定的,是指获取state的值
          return state.myName+"我是计算属性啊"
        },
        more20stu(state){
          return state.students.filter(s=>s.age>20)
        },
        moreAgeStu(state){
        //通过返回一个方法来接收页面传来的参数
          return function(age:any){
          //调用数组的新特性filter,filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。
            return state.students.filter(s=>s.age>age)
          }
        }
      }
    

    调用

        <div>
          <h2>vue计算属性</h2>
          <h3>获取计算属性的getMyName的值:{{$store.getters.getMyName}}</h3>
          <h3>通过vuex的getters获取state的学生大于20岁的对象为:
            {{$store.getters.more20stu}}
          </h3>
          <h3>
            给计算属性传值需要返回一个方法接收:
            {{$store.getters.moreAgeStu(22)}}
          </h3>
        </div>
    

    3.mutations

    mutations是提交更新数据的方法,必须是同步的(如果需要异步使用action)。每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。在 mutations定义操作state变量,在页面展示的方法中通过this.$store.commit()调用mutations里的方法,进行操作state。
    定义

      mutations: {
        // this.$store.commit('increment')
        increment(state){
          state.count++;
        },
        incrementCount(state,count:any){
           state.count+=count;
        },
        decrement(state){
          state.count--;
        }
      }
    

    调用

    //在template中
        <h2>store的值:{{$store.state.count}}
          <h3 v-for="item in $store.state.students" :key="item.id">
              <h4>id:{{item.id}},姓名:{{item.name}},年龄:{{item.age}}</h4>
          </h3>
        <button @click="addtion">+</button>
        <button @click="subtion">-</button>
        <button @click="addCount(5)">+5</button>
        <button @click="addCount(10)">+10</button>
      </h2>
    //在<script lang="ts">中
    	  $store: any;
    	  addtion(){
    	    this.$store.commit('increment')
    	  }
    	  addCount(count:any){
    	  //'incrementCount需要请求mutations的方法名,count传递的参数
    	    this.$store.commit('incrementCount',count)
    	  }
    	  subtion(){
    	    this.$store.commit('decrement')
    	  }
    

    4.actions

    action 相似于 mutation,但是用来代替Mutation进行异步操作的函数
    定义

      actions: {
        updateName(context,payload){
          setTimeout(()=>{
            context.commit('updateNameInfo',payload)
          },1000)
        },
        promiseUpdateName(context,payload){
          return new Promise((resolve,reject)=>{
            setTimeout(()=>{
              context.commit('updateNameInfo',payload);
              resolve('成功修改');
            },1000)
          })
        }
      }
    

    调用

    //template
       <div>
         <h1>-----------------actions-------------</h1>
           <h2>(1)通过action修改name:{{$store.state.name}}
           <button @click="updateName">确定修改</button>
           <button @click="promiseUpdateName">promise回调修改</button>
         </h2>
       </div>
    //在<script lang="ts">中
    	updateName(){
    	 this.$store.dispatch('updateName','我是action');
    	}
    	promiseUpdateName(){
    	 this.$store.dispatch('promiseUpdateName','我是携带的信息')
    	 .then((res:any)=>{
    	   alert("action已经提交修改,并返回的参数为:"+res)
    	 });
    	}
    

    5.modules

    module:可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰,方便管理。在module模块中,五大属性(state,getters,mutations等等)用法差不多根store的五法属性用法差不多。区别就是换地方存储操作数据。方便管理
    定义

    const moduleA={
      state:{
        moduleName:"moduleA"
      },
      mutations:{
        updateModuleAName(state:any,payload:any){
           state.moduleName=payload;
        }
      },
      actions:{},
      getters:{
        fullName(state:any){
          return state.moduleName+",我是moduleA的计算属性"
        },
        fullName1(state:any,getters:any){
        //
          return "通过getters参数获取计算属性的值:"+getters.fullName
        },
        fullName2(state:any,getters:any,rootState:any){
          return "通过rootStare获取根state里的值:"+rootState.name;
        }
      }
    }
    const moduleB = {
     state: { ... },
     mutations: { ... },
     actions: { ... }
     }
     
    const store = new Vuex.Store({
     modules: {
      a: moduleA,
      b: moduleB})
    

    调用

    //template
       <div>
         <h1>-----------------modules-------------</h1>
           <h2>moduleName:{{$store.state.a.moduleName}}</h2>
           <button @click="updateModuleName">修改module名字</button>
           <h2>modules的计算属性1{{$store.getters.fullName1}}</h2>
           <h2>modules的计算属性2{{$store.getters.fullName2}}</h2>
       </div>
    //在<script lang="ts">中   
       updateModuleName(){
       this.$store.commit('updateModuleAName','moduleA被 修改了')
    }
    
    展开全文
  • vue3 计算属性的写法

    千次阅读 2020-12-03 12:17:28
    <template> <div class="container"> <p>{{count}}</p> <p>{{double}}<...button class="btn btn-primary" @click="add" type="submit">...script lang="ts".
  • vue 计算属性 get 和set 案例

    千次阅读 2018-09-11 09:25:28
    计算属性默认只有 get ,不过在需要时你也可以提供一个 set: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&...
  • 1、VueCli3+ 中的计算属性,直接通过关键字"set"、"get"定义: 权限(private) get 属性名() { return xxx; } 权限(private) set 属性名(数据类型 新数据) { this.属性名 = 新数据; } 2、VueCli2 中的...
  • vue ts写法

    2021-04-26 14:34:17
    传统写法 <script> export default { name: 'xx',// 组件名 components: {},// 组件 props: {},// 父组件传递来的值 ... data() { // 声明变量的位置 ... computed:{}, // 计算属性 .
  • React中的“计算属性

    千次阅读 2019-12-10 16:07:42
    React中的“计算属性” 相信许多学习过vue的小伙伴对计算属性都不陌生吧。计算属性能帮我们数据进行一些计算操作,计算属性是依赖于data里面的数据的,在vue中只要计算属性依赖的data值发生改变,则计算属性就会调用...
  • 在编译时候报‘Property 'filter' does not exist on type '...是因为tslint检查时不知道this.$refs.tree的类型,因此才报这个错。只要用ts的类型断言给他指定类型就不会报错了。 转载于:https://www.cnbl...
  • 计算属性默认只有getter,不过在需要时也可以使用setter。默认情况下是使用getter读取的。 比如: 当您要收到去修改计算属性的值,向修改一个普通数据那样时,就会触发setter,执行一些自定义的操作。 比如: 当...
  • vue中的计算属性computed

    千次阅读 2019-09-15 12:32:00
    目录 ...逻辑处理就是在计算属性内可以执行一些自己写的逻辑,数据监视就是计算属性内的返回值是依赖其他属性的变化而变化 一,计算属性的基本使用 <!DOCTYPE html> <html> <h...
  • vue 中有 computed 计算属性这个概念,是非常好用的,不仅避免了人为 set 还具有及时响应的特点。 有了计算属性这个功能,可以很方便的对 props 进行一些中间处理,最后展示结果到视图上(或使用至需要的地方)。 在...
  • deep为true时,代表同时监听对象内部属性情况,内部变化,也会触发该函数 @Watch("addForm.startTime", { immediate: true, deep: true }) onStartTimeChange(newVal, oldVal) { console.log(newVal + ',' + ...
  • 解决办法 定义一个isMounted变量,并将其引入到计算属性property中。 Vue . component ( 'my-component' , { data ( ) { return { isMounted : false } } , computed : { property ( ) {...
  • 因为计算属性是一个属性,不是一个方法,所以会报错is not a function 错误写法 <div id="app"> {{num(1)}} </div> <script> var vm = new Vue({ el: '#app', data: { }, computed:{ num...
  • 关闭Vue计算属性自带的缓存功能

    千次阅读 2017-08-28 11:37:21
    使用Vue的小伙伴都会知道,vue的计算属性。这个是这个样子解释的,当某些依赖值发生变化的时候,其自身的值也会发生变化,与之先关的DOM也会发生变化,通常呢,这个计算属性里面都会有两个方法:get和set可以使用。...
  • vue计算属性-完整写法 目标: 计算属性也是变量, 如果想要直接赋值, 需要使用完整写法 语法: computed: { "属性名": { set(值){ }, get() { return "值" } } } <template> <div> 名字: ...
  • vue中为computed计算属性传参遇到的问题,已解决
  • Vue 的setter(设置计算属性)

    千次阅读 2018-10-31 23:57:00
    &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport"...lt
  • 瓷片博客主要讲解下如何利用computed的计算属性进行传参。 场景引入 在前端项目开发过程中,会遇到码值转换应用场景,且不同页面会存在复用码值转换情况,为提升代码服用率,考虑将码值转换函数抽取为公共函数,在...
  • 数据是从后台获取的,想在计算属性中,对data数据截取,但是报错未定义 原因:那是因为data里的数据是在mouted中执行函数才获取到数据,是在computed之后,所以在第一次computed计算时,data中数据还是空的,所以...
  • 在vue的计算属性computed中实现传参

    千次阅读 2019-06-06 17:07:56
    遇到了一个需求是根据vue中传入的数据去计算是否禁用checkbox,这时候就需要实时计算,还需要将vue中的数据传入 demo html <Checkbox :disabled="!check(secondValue)"></Checkbox> js computed: { ...
  • 对象字面量可以使用计算属性名,把任何表达式放在中括号里, 表达式的运算结果将会是对应的属性名 */ var expertise = 'journalism' var person = { name:"Sharon", age:27, [expertise]:{ years:5, ...
  • 1、正常传值,举一个小例子,根据列表中科目类型的比例进行计算,对对应的input值进行计算: <div class="column"> <el-form-item :label="'贷方比例'"> <el-input ...
  • 需求,根据传递过来的宽高比,进行宽高的重新计算 computed:{ imgWD(o){ return function(o){ return { width:'370px', height:370*(1/o) + 'px' } } } } <div :style=...
  • VUE+TS 方法整理

    2021-02-20 23:36:19
    } } </script> 计算属性 <script lang="ts"> import { Component, Vue, Provide } from 'vue-property-decorator'; @Component({ components: {}, }) export default class Home extends Vue { @Provide() private ...
  • 我们在做项目中有可能会遇到这样一种情况 比如A状态传递过来的是数字 我们需要使用switch来判断这个所属状态分别代表什么意思 (当然啦 这个过滤器也可以实现) 不过今天我要跟大家分享的是使用计算属性来实现快跟着我...
  • vue + ts写法

    2021-06-11 13:59:16
    传统写法 <script> export default { name: 'xx',// 组件名 components: {},// 组件 props: {},// 父组件传递来的值 data() { // 声明变量的位置 return {};... computed:{}, // 计算属性

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 23,599
精华内容 9,439
关键字:

ts计算属性

友情链接: MRImaster.zip