sergAccount

Untitled

Sep 28th, 2020 (edited)
203
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 2.12 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-for -->
  14. <div id="app"> 
  15.     <div>
  16.         <div v-for="n in 4">{{ n }} </div>
  17.     </div>
  18.  
  19.     <template v-if="flag">
  20.         <h1>hhhhhh1</h1>
  21.         <h2>h2222222</h2>
  22.         <p>rrrrrrrrrr</p>
  23.     </template>
  24.  
  25.     <template v-for="n in 4">
  26.         <h3>RRRRRR</h3>
  27.         <h4>ddfddg</h4>
  28.     </template>
  29.  
  30.     <ul id="example-1">
  31.         <li v-for="item in items" :key="item.message">
  32.             {{ item.message }}
  33.         </li>
  34.     </ul>
  35.  
  36.     <ul id="example-2">
  37.     <li v-for="(item, index) in items">
  38.          {{ index }} - {{ item.message }}
  39.     </li>
  40.     </ul>
  41. </div>
  42. </body>
  43. <script type="text/javascript">
  44.     // создаем объект Vue (экземпляр Vue)
  45.     vm = new Vue({
  46.         el: "#app",
  47.         data: {
  48.             items: [
  49.                  { message: 'Foo' , code: 'GG'},
  50.                  { message: 'Bar' , code: 'GG'}
  51.             ],
  52.             products: [],
  53.             type: 'B',
  54.             flag: true,
  55.             num: 1,
  56.             name: "HELLO VUE",
  57.             name2: "<b>HELLO VUE2</b>",
  58.             age: 25,
  59.             message: '',
  60.  
  61.             checked: true,
  62.             picked: 'first',
  63.            
  64.             language: "Java",
  65.  
  66.             product: {
  67.                 name: '',
  68.                 price: 0
  69.                   //Наименование
  70.                   //    Цена  
  71.             },
  72.  
  73.             useraccount:{
  74.                 //  Имя
  75.                 // Фамилия
  76.                 // Возраст
  77.                 name: '',
  78.                 surname: '',
  79.                 age: 0
  80.             }
  81.         },
  82.         methods: {
  83.  
  84.             canShow: function(){
  85.                 return false;
  86.             },
  87.  
  88.             test: function(event){
  89.                 console.log('test invoked!!!')
  90.                 // используем this для того чтобы обратиться к определенному св-ву по имени
  91.                 this.name = 'NEW NAME';
  92.                 this.age = 20;
  93.             }
  94.         },
  95.         created: function() {
  96.             this.product.name = 'TEST77777777777';
  97.  
  98.             var a1 = this.items.filter(el => el.message === 'Foo');
  99.             console.log(a1);
  100.         }
  101.     })
  102. </script>
  103. </html>
Add Comment
Please, Sign In to add comment