Question

所以这是jsFiddle示例：

HTML：

<div id="demo">
  does not show $ sign in input as in second input - why? <br>
  <!-- the diff is only that filter is defined diferently -->    
  <input type="text" v-model="a | currencyDisplay">
  <span >model value: {{a }}</span>
</div>

JS：

Vue.filter('currencyDisplay', {
  currencyDisplay: {
    // model -> view
    // formats the value when updating the input element.
    read: function(val) {
      console.log('filter red');
      return '$'+val.toFixed(2)
    },
    // view -> model
    // formats the value when updating the data.
    write: function(val, oldVal) {
      console.log('filter write');

      var number = +val.replace(/[^\d.]/g, '')
      return isNaN(number) ? 0 : number
    }
  }
})

var demo = new Vue({
  el: '#demo',
  data: {
    a: 5
  }
})

当我查看文档示例的来源时，他们会将这样的代码放在其中：

new Vue({
  el: '#two-way-filter-demo',
  data: {
    money: 123.45
  },
  filters: {
    currencyDisplay: {
      read: function(val) {
        return '$'+val.toFixed(2)
      },
      write: function(val, oldVal) {
        var number = +val.replace(/[^\d.]/g, '')
        return isNaN(number) ? 0 : number
      }
    }
  }
})

所以区别在于过滤器的定义方式。但它必须根据文件两种方式工作。这有什么不对？

http://jsfiddle.net/yMv7y/975/

Answer 1

您应该从全局过滤器中删除<tbody> <?php foreach ($ds_name as $dsname): ?> <tr> <td><div class="text-infoo<?= $dsname->id ?>"><?= $dsname->name ?></div></td> <td> <a href="#" id="edit<?= $dsname->id ?>"><span class="glyphicon glyphicon-pencil"></span></a> <a href="#" id="ok<?= $dsname->id ?>"><span class="glyphicon glyphicon-ok"></span></a> <a href="#"><span class="glyphicon glyphicon-remove"></span></a> </td> </tr> <?php endforeach; ?> </tbody> <?php foreach ($ds_name as $dsname): ?> $('#edit<?= $dsname->id ?>').click(function () { var text = $('.text-infoo<?= $dsname->id ?>').text(); var input = $('<input id="attribute<?= $dsname->id ?>" type="text" data-id="<?php echo $ds_content->id; ?>"value="' + text + '" />'); $('.text-infoo<?= $dsname->id ?>').text('').append(input); input.select(); input.blur(function () { var text = $('#attribute<?= $dsname->id ?>').val(); $('#attribute<?= $dsname->id ?>').parent().text(text); $('#attribute<?= $dsname->id ?>').remove(); }); $('#edit<?= $dsname->id ?>').hide(); $('#ok<?= $dsname->id ?>').show(); }); <?php endforeach; ?>键：

currencyDisplay

全局定义时，Vue自定义筛选器不起作用

1 个答案: