Блог

Главная - Вопросы по программированию - Могу ли я привязать данные к функции в Vue js?

Могу ли я привязать данные к функции в Vue js?

#javascript #function #vue.js #data-binding

Вопрос:

можно ли привязать функцию к данным в Vue?

В шаблоне у меня есть что-то вроде: <title> {{nameofFunction()}}</title>

Когда я запускаю его, на странице просто написано «собственная функция».

Спасибо.

Комментарии:

1. что возвращает ваша функция?

2. @PedroFeltrin он возвращает строку / фрагмент текста в зависимости от некоторых условий из другой функции, которая вызывается в этой функции, которую я хочу связать.

3. Можете ли вы показать больше кода ?

4. Можно ли с уверенностью предположить, что nameofFunction это происходит из файла, который не является вашим компонентом Vue, и вы его импортируете?

5. Обратите внимание, что title тег недопустим в разделе <тело><тело> , он должен быть в разделе <голова><голова> .

Ответ №1:

Существует также такая вещь, как «вычисляемое свойство» в Vue, предназначенное именно для этого:

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

<script>
export default {
  data:() => ({
    message: 'Hello'
  }),
  computed: {
    // a computed getter
    reversedMessage: function () {
      // `this` points to the vm instance
      return this.message.split('').reverse().join('')
    }
  }
}
</script>

Ответ №2:

да, ты можешь. Не могли бы вы поделиться тем, как вы определяете свои параметры данных?

Здесь у меня есть пример, который работает как в Vue2, так и в Vue3

 <template>
  <div id="app">
    <h1>{{messageHelloFn()}}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      messageHelloFn: (name = 'Lucas') => {
        return `Hello ${name}`
      }
    };
  }
};
</script>

Живой пример: https://codepen.io/LucasFer/pen/abywRMW

Ответ №3:

a.js

 const func = (str) => str
export default fn
 
 <template>
  <div id="app">
    <div v-for="item in items">
      {{ getTime(item) }}
    </div>
    <div>
      {{ fn('a') }}
    </div>
    <div>
      {{ func('b') }}
    </div>
  </div>
</template>

<script>
import func from './a.js'
export default {
  data () {
    return {
      items: ['123123', '456456'],
      fn: (str) => str
    }
  },
  methods: {
    getTime (v) {
      return v   '123'
    }
  }
};
</script>
Метки: