sergAccount

Untitled

Sep 28th, 2020
212
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 1.56 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>Hello Vue</title>
  5.     <meta charset="utf-8">
  6.     <!-- https://unpkg.com/vue@2.6.11/dist/vue.min.js -->
  7.     <!-- подключение фреймворка vue.js -->
  8.     <script type="text/javascript" src="https://unpkg.com/vue"></script>
  9. </head>
  10. <body>
  11. <!-- элемент div c идентификатором app -->
  12.  
  13. <!-- v-if -->
  14. <!-- v-show -->
  15. <div id="app">
  16.    
  17.     <div v-if="flag">
  18.         TEXT sadfasfasfsaf
  19.     </div>
  20.     <div v-else>
  21.         TEXT - выводится если значение флага = false
  22.     </div>
  23.  
  24.     <div v-show="flag">
  25.         SOME TEXT
  26.     </div>
  27.  
  28. </div>
  29. </body>
  30. <script type="text/javascript">
  31.     // создаем объект Vue (экземпляр Vue)
  32.     vm = new Vue({
  33.         el: "#app",
  34.         data: {
  35.             flag: false,
  36.             name: "HELLO VUE",
  37.             name2: "<b>HELLO VUE2</b>",
  38.             age: 25,
  39.             message: '',
  40.  
  41.             checked: true,
  42.             picked: 'first',
  43.            
  44.             language: "Java",
  45.  
  46.             product: {
  47.                 name: '',
  48.                 price: 0
  49.                   //Наименование
  50.                   //    Цена  
  51.             },
  52.  
  53.             useraccount:{
  54.                 //  Имя
  55.                 // Фамилия
  56.                 // Возраст
  57.                 name: '',
  58.                 surname: '',
  59.                 age: 0
  60.             }
  61.         },
  62.         methods: {
  63.             test: function(event){
  64.                 console.log('test invoked!!!')
  65.                 // используем this для того чтобы обратиться к определенному св-ву по имени
  66.                 this.name = 'NEW NAME';
  67.                 this.age = 20;
  68.             }
  69.         },
  70.         created: function() {
  71.             this.product.name = 'TEST77777777777';
  72.         }
  73.     })
  74. </script>
  75. </html>
Add Comment
Please, Sign In to add comment