美文网首页
三、vue从入门到进阶:计算属性computed与侦听器watc

三、vue从入门到进阶:计算属性computed与侦听器watc

作者: 负15厘米的爱 | 来源:发表于2019-04-22 19:33 被阅读0次

    计算属性computed

    var vm = new Vue({
    el: '#example',
    data: {
    message: 'Hello'
    },
    computed: {
    // 计算属性的 getter
    reversedMessage: function () {
    // this 指向 vm 实例 (这个为反转)
    return this.message.split('').reverse().join('')
    }
    }
    })

    <div id="example">
    <p>Original message: "{{ message }}"</p>
    <p>Computed reversed message: "{{ reversedMessage }}"</p>
    </div>

    vm.reversedMessage 的值始终取决于 vm.message 。。而计算内的是可以立即返回结果的。

    总结,计算属性可以定

    // 计算属性的 getter
    reversedMessage:{
    get:function () {
    // this 指向 vm 实例
    return this.organ.organName.split('').reverse().join('')
    },
    set:function (va) {
    this.organ.organName = this.organ.organName + va;
    }
    }
    vm.rereversedMessage= 'sss' 直接用。

    侦听器watch

    js
     watch: {
        // 如果 `question` 发生改变,这个函数就会运行
        question: function (newQuestion) {
          this.answer = 'Waiting for you to stop typing...'
          this.getAnswer()
        }
      },
     <input v-model="question">
    

    也可以用 API
    vm.$watch( expOrFn, callback, [options] )
    参数:
    {string | Function} expOrFn
    {Function | Object} callback
    {Object} [options]

    {boolean} deep
    {boolean} immediate
    返回值:{Function} unwatch
    用法:
    观察 Vue 实例变化的一个表达式或计算属性函数。回调函数得到的参数为新值和旧值。表达式只接受监督的键路径。对于更复杂的表达式,用一个函数取代。

    // 键路径
    vm.$watch('a.b.c', function (newVal, oldVal) {
    // 做点什么
    })
    //新与旧

    var unwatch =vm.$watch(
    function () {
    return this.organ.organName +"232:"+ this.organ.organName
    },
    function (newVal, oldVal) {
    console.log(newVal,oldVal);
    }
    )
    //不使用
    unwatch();

    样式与style绑定

    :class :style
    简单使用可随时百度。

    [vue从入门到进阶:过滤器filters(五)]

    可以用于表单校验

    <div id="app">
    <input type="text" v-model="message" />
    {{message | capitalize }}
    </div>

    var vm=new Vue({
    el:"#app",
    data:{
    message:''
    },
    filters: {
    capitalize: function (value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
    }
    }
    })

    全局定义过滤器

    Vue.filter('capitalize', function (value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
    })

    方法

    Vue.filter()
    语法:Vue.filter( id, [definition] )
    参数:

    {string} id
    {Function} [definition]
    // 注册
    Vue.filter('my-filter', function (value) {
    // 返回处理后的值
    })

    // getter,返回已注册的过滤器
    var myFilter = Vue.filter('my-filter')

    相关文章

      网友评论

          本文标题:三、vue从入门到进阶:计算属性computed与侦听器watc

          本文链接:https://www.haomeiwen.com/subject/avyugqtx.html