Заставка

Программирование на старых и современных языках, а так-же дизайн

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.

Вы здесь » Программирование на старых и современных языках, а так-же дизайн » Vue.JS (Web) » Vue.JS считываем текст из поле, и выводим введёный текст на экран

Vue.JS считываем текст из поле, и выводим введёный текст на экран

Страница: 1

Сообщений 1 страница 5 из 5

1

  • Автор: lexx821
  • Модератор
  • lexx821
  • Приглашений: 0
  • Сообщений: 802
  • Уважение: [+1/-0]
  • Позитив: [+8/-11]
  • Пол: Мужской
  • Последний визит:
    Вс, 1 Дек 2024 09:41:42

Простой пример:
Файл index.html:

Код:
<!DOCTYPE html>
<html>
  <head>
    <title>Урок 1 - простой пример vue js</title>
  </head>
  <body>
    <!-- Начало нашего приложения -->
    <div id="app">
      <input v-model="myname" placeholder="Как вас зовут?">
      <br>
      <div>Вас зовут: <b>{{ myname }}</b></div>
    </div>
    <!-- Конец нашего приложения -->
    <script src="https://unpkg.com/vue@3"></script>
    <script src="App.js"></script>
  </body>
</html>

Файл App.js:

Код:
const App = {
  data() {
    return {
      myname: ''
    }
  }
}

Vue.createApp(App).mount('#app')

Описание:
Запуск нашего приложения осущствляется спомощью - Vue.createApp(App).mount('#app'), в методе mount написано #app, это значит, что будет обрабатываться тэг с id app:

Код:
<div id="app">
...
</div>

Результат работы:
https://i.ibb.co/C8DCqYs/vuejs-04-56-09-07-2022-min.jpg

0

2

  • Автор: lexx821
  • Модератор
  • lexx821
  • Приглашений: 0
  • Сообщений: 802
  • Уважение: [+1/-0]
  • Позитив: [+8/-11]
  • Пол: Мужской
  • Последний визит:
    Вс, 1 Дек 2024 09:41:42

Если написать так:

Код:
<input v-model="myname" placeholder="Как вас зовут?">
<div id="app">
      <br>
      <div>Вас зовут: <b>{{ myname }}</b></div>
</div>

то работать не будет, т.к. тег input за пределами тега div с id app.

0

3

  • Автор: lexx821
  • Модератор
  • lexx821
  • Приглашений: 0
  • Сообщений: 802
  • Уважение: [+1/-0]
  • Позитив: [+8/-11]
  • Пол: Мужской
  • Последний визит:
    Вс, 1 Дек 2024 09:41:42

Пример Вариант 2:

Файл index.html:

Код:
<!DOCTYPE html>
<html>
  <head>
    <title>Урок 1 - простой пример vue js</title>
  </head>
  <body>
    <div id="app">
      <input v-model="myname" :placeholder="placeHolder">
      <br>
      <div>Вас зовут: <b>{{ myname }}</b></div>
    </div>
    <script src="https://unpkg.com/vue@3"></script>
    <script src="App.js"></script>
  </body>
</html>

Файл App.js:

Код:
const App = {
  data() {
    return {
      placeHolder: 'Как вас зовут?',
      myname: ''
    }
  }
}

Vue.createApp(App).mount('#app')

Во втором варианте, мы вынесли placeholder:

Код:
<input v-model="myname" placeholder="Как вас зовут?">

в переменную placeHolder:

Код:
const App = {
  data() {
    return {
      placeHolder: 'Как вас зовут?',

А в placeholder поместили - :placeholder="placeHolder"

0

4

  • Автор: lexx821
  • Модератор
  • lexx821
  • Приглашений: 0
  • Сообщений: 802
  • Уважение: [+1/-0]
  • Позитив: [+8/-11]
  • Пол: Мужской
  • Последний визит:
    Вс, 1 Дек 2024 09:41:42

Второй вариант работает так-же как и первый.

0

5

  • Автор: lexx821
  • Модератор
  • lexx821
  • Приглашений: 0
  • Сообщений: 802
  • Уважение: [+1/-0]
  • Позитив: [+8/-11]
  • Пол: Мужской
  • Последний визит:
    Вс, 1 Дек 2024 09:41:42

Вариант 3:

Файл index.html:

Код:
<!DOCTYPE html>
<html>
  <head>
    <title>Урок 1 - простой пример vue js</title>
  </head>
  <body>
    <div id="app">
      <input v-model="myname" :placeholder="placeHolder">
      <br>
      <div><span v-if="myname.length">{{ yourName }}</span><b>{{ myname }}</b></div>
    </div>
    <script src="https://unpkg.com/vue@3"></script>
    <script src="App.js"></script>
  </body>
</html>

Файл App.js:

Код:
const App = {
  data() {
    return {
      yourName: 'Вас зовут:',
      placeHolder: 'Как вас зовут?',
      myname: ''
    }
  }
}

Vue.createApp(App).mount('#app')

Суть проверяем спомощью аттрибуты v-if в теге span на длину переменной myname, и если переменная myname не пустая, то отображаем текст из переменной myname и yourName:

Код:
<span v-if="myname.length">{{ yourName }}</span>

0

Страница: 1

Вы здесь » Программирование на старых и современных языках, а так-же дизайн » Vue.JS (Web) » Vue.JS считываем текст из поле, и выводим введёный текст на экран