Sashqa

<select v-model="selected">
  <option v-for="n in deliveryPrice" :value="n">{{ n.city }}</option>
</select>

<p>{{ selected.city }}</p>
<p>{{ selected.priceFrom }}</p>

<select v-model="city">
  <option v-for="n in deliveryPrice">{{ n.city }}</option>
</select>

computed: {
  selected() {
    return this.deliveryPrice.find(n => n.city === this.city);
  },
},

@Directive({
    selector: '[hasRole]'
})
export class HasRoleDirective implements OnInit {
    @Input() hasRole: Array<string>;

    constructor(private viewContainerRef: ViewContainerRef, 
                       private template: TemplateRef<any>) {}

    ngOnInit() {
        this.checkRoles('user');
    }

    checkRoles(userRole: string) {
        console.log("Роль пользователя: " + userRole);
        if (!this.hasRole || this.hasRole.indexOf(userRole) != -1) {
            console.log("Есть доступ");
            this.viewContainerRef.createEmbeddedView(this.template);
        } else {
            this.viewContainerRef.clear();
            console.log("Доступ запрещен");
        }
    }
}

<p *hasRole="['admin', 'user']"><Блок идят только Админ и Пользователь</p>
<div *hasRole="['admin']">Тестовый блок который видит только Админ</div>

<template [hasRole]="['admin', 'user']">
   <p>Тестовый параграф которые видят только Админ и Пользователь</p>
</template>
<template [hasRole]="['admin']">
   <div>Тестовый блок который видит только Админ</div>
</template>

const createList = arr => arr.reduceRight((acc, n) => ({ val: n, next: acc }), null);

const list = createList([ 1, 2, 3, 4 ]);

var re  = 'яблоки';
var reg = new RegExp(re,"g");
var str = 'яблоки круглые и яблоки сочные.';
var str = str.replace(reg, '<a href="#">' + re + '</a>');
alert(str);

...

function delay(func, timeOut) {
    // при вызове delay(func, timeOut) мы создаем анонимную функцию и возвращаем ее
    // но при этом внутри нее мы обращаемся к переданному параметру func 
    // создавая тем самым замыкание на него
    return function() {
        // внутри возвращаемой анонимной функции мы запускаем таймер
        // которому передаем параметр func являющейся функцией, определенной 
        // где то вовне этот таймер выполнит func но при этом внутри самой func 
        // уже будет не видны параметры переданные для анонимной функции. 
        // Внутри анонимной функции эти параметры можно получить через arguments.
        // Тля того, чтобы func могла получить к ним доступ, мы используем apply, 
        // привязывая к func контент вызова анонимной функции и ее arguments
        // тем самым создавая замыкания к this и arguments анонимной функции
        setTimeout(func.apply(this, arguments), timeOut);
        // как правильно подсказал @bingo347, эту строчку надо немного переписать
        setTimeout(func.bind(this, ...arguments), timeOut);
    }
}

// примерно того же эффекта можно было добиться следующим кодом
function delay(func, timeOut) {
    return function(text) {
        setTimeout(()=>func(text), timeOut);
    }
}

// можно даже добиться не примерно такого, а точно такого же эффекта
// (за исключением привязки контекста анонимной функции через this
// который влияет лишь на возможность обратится непосредственно
// к методам и свойствам самой анонимной функции, которых в вашем
// примере не объявлено ))) 
function delay(func, timeOut) {
    return function(...args) {
        setTimeout(()=>func(...args), timeOut);
    }
}
...

function f(argument1, argument2) {
    alert(argument1 + " " + argument2);
}
let f1000 = delay(f, 1000);
f1000("1111", "2222"); // показывает "1111 2222" после 1000 мс

function f(argument1, argument2, argument3) {
    alert(argument1 + " " + argument2 + " " + argument3);
}
let f1000 = delay(f, 1000);
f1000("1111", "2222", "3333"); // показывает "1111 2222 3333" после 1000 мс

const sum = str.match(/\d+/g).reduce((acc, n) => acc + +n, 0);

// или

let sum = 0;
for (const n of str.split(/\D+/)) {
  sum += Number(n);
}

preg_match_all('/\d+/', $str, $matches);
$sum = array_sum($matches[0]);

// или

$sum = 0;
foreach (preg_split('/\D+/', $str) as $n) {
  $sum += intval($n);
}

data: () => ({
  size: 52,
  col: 0,
  row: 0,
}),
methods: {
  onMouseMove(e) {
    this.col = e.offsetX / this.size | 0;
    this.row = e.offsetY / this.size | 0;
  },
},
computed: {
  blockStyle() {
    return {
      backgroundSize: `${this.size}px ${this.size}px`,
    };
  },
  blockCursorStyle() {
    const { col, row, size } = this;
    return {
      transform: `translate(${col * size}px, ${row * size}px)`,
      width: `${size * 0.95}px`,
      height: `${size * 0.95}px`,
    };
  },
},

<div class="block" :style="blockStyle" @mousemove="onMouseMove">
  <div class="block-cursor" :style="blockCursorStyle"></div>
</div>

Vue.directive('сarusel', {