Автор Тема: Vue.js -demo  (Прочетена 938 пъти)

0 Потребители и 1 Гост преглежда(т) тази тема.

HD

  • Administrator
  • Hero Member
  • *****
  • Благодарности
  • -Казани: 208
  • -Получени: 165
  • Публикации: 3077
Vue.js -demo
« -: 07 Февруари 2016, 13:14:48 »
Здравейте,
Напоследък започнах да разцъквам vue.js  и го препоръчвам всеки да се запознае с него. Улеснява доста нещата.  Реших да ви покажа малко код.
Имаме прост формуляр с textarea. Искаме да покажем съответната грешка, ако полето за текст е празно.  Ето и кода за това.
Код: HTML
  1. <!DOCTYPE html>
  2.         <title>Vue show</title>
  3. </head>
  4. <div id="container">
  5.        
  6.         <form>
  7.                 <span class ='error' style="color:red;" v-show="!message">
  8.                 Напишете текст
  9.                 </span>
  10.                 <br/>
  11.                 <textarea v-model ="message">
  12.                        
  13.  
  14.                 </textarea>
  15.                 <br/>
  16.                 <button type="submit">
  17.                 Изпрати съобщение
  18.                 </button>
  19.         </form>
  20.        
  21.  
  22. </div>
  23. <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.min.js"></script>
  24. <script type="text/javascript">
  25.         new Vue({
  26.                 el:"#container",
  27.                 data:{
  28.                         message: ""
  29.                 }
  30.  
  31.         });
  32.  
  33. </body>
  34. </html>
  35.  
За да е интересно на всички, как ще скриете бутона с vue.js?