A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Filtros

35/53
Recursos

Aportes 9

Preguntas 1

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

En Vue 3 ya ni siquiera existen filtros, pero se pueden usar m茅todos para simular filtros, en el curso b谩sico de vuejs en la clase de filtros deje una explicaci贸n de c贸mo hacerlo

Una mejora a la propuesta de @cristoferfb

return `${(min < 10) ? '0' + min : min}:${(sec < 10) ? '0' + sec : sec} min`

Un filtro es como un decorador para la data de nuestros componentes.

Los filtros permite filtrar texto comun y convertirlo en otro segun los criterio que se le asignen estos mismos pueden declararse como una exprecio en un v-bind segun la funcionalidad lo requiera la sintaxi tiene que ser de la siguiente forma 鈥渰{ OldText | Filter }}鈥 la sintaxi es predeterminada con un simbolo 鈥減ipe鈥 pueden ser cleado de manera local desde un componente o de manera global.
https://es.vuejs.org/v2/guide/filters.html

const msToMm = {}

function convertMsToMm (ms) {
  const min = Math.floor(ms / 60000)
  const sec = ((ms % 60000) / 1000).toFixed(0)
  return `${(min < 10) ? '0' + min : min}:${(sec < 10) ? '0' + sec : sec}`
}

msToMm.install = function (Vue) {
  Vue.filter('ms-to-mm', (ms) => {
    return convertMsToMm(ms)
  })
}

export default msToMm

les comparto el codigo para el filtro


function convertMsToMm(ms) { 
    var seconds = (ms / 1000).toFixed(0);
    var minutes = Math.floor(seconds / 60);
    var hours = "";
    if (minutes > 59) {
        hours = Math.floor(minutes / 60);
        hours = (hours >= 10) ? hours : "0" + hours;
        minutes = minutes - (hours * 60);
        minutes = (minutes >= 10) ? minutes : "0" + minutes;
    }

    seconds = Math.floor(seconds % 60);
    seconds = (seconds >= 10) ? seconds : "0" + seconds;
    if (hours != "") {
        return hours + ":" + minutes + ":" + seconds;
    }
    return minutes + ":" + seconds;
}

Lo aplique como en el curso anterior, se me hizo mas facil.

const msToMin = (value) => {
  if (!value) {
    return " 0 minutos";
  }
  const minutes = Math.floor(value / 60000);
  const seconds = ((value % 60000) / 1000).toFixed(0);
  return `${minutes} : ${seconds < 10 ? "0" + seconds : "" + seconds}  min.`;
};

export { msToMin };

Vue.js le permite definir filtros que pueden usarse para aplicar formato de texto com煤n. Se puede utilizar filtros en dos lugares: interpolaciones mustache y expresiones v-bind. Los filtros se deben agregar al final de la expresi贸n de JavaScript, denotados por s铆mbolo 鈥減ipe鈥:

<!-- en mustaches -->
{{ message | capitalize }}

<!-- en v-bind -->
<div v-bind:id=鈥渞awId | formatId鈥></div>```

Hay un detalle visual para los segundos ya que se muestra a 1 d铆gito si es menor a 10, podemos usar la funci贸n padStart para mantener dos digitos.

return `${min}:${sec.padStart(2, '0')}`;

y eso nos retornara los segundos a 2 d铆gitos.