sergAccount

Untitled

Sep 29th, 2020
220
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 1.49 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.     <style type="text/css">
  10.     .active {
  11.       color: red
  12.     }
  13.     .some {
  14.       font-size: 24px;
  15.     }    
  16.     </style>
  17. </head>
  18. <body>
  19. <!-- элемент div c идентификатором app -->
  20. <!-- v-for -->
  21. <div id="app">   
  22.     <!-- .prevent -->
  23.     <a href = "http://www.google.com" @click.prevent = "clickme('test')">Click Me</a>
  24.     <div :style="styleobj" @mouseover = "changebgcolor" @mouseout = "originalcolor"></div>
  25. </div>
  26. </body>
  27. <script type="text/javascript">
  28.     // создаем объект Vue (экземпляр Vue)
  29.     new Vue({
  30.   el: "#app",
  31.   data: {
  32.     styleobj : {
  33.           width:"100px",
  34.           height:"100px",
  35.           backgroundColor:"red"
  36.     },  
  37.     price: 10,
  38.     products: [
  39.       {name: "Product1", price: 100},
  40.       {name: "Product2", price: 200}
  41.     ]
  42.   },
  43.   computed:{
  44.     bonus: function(){
  45.       return this.price * 0.2;
  46.     }
  47.   },    
  48.   methods : {
  49.       clickme : function(param){
  50.         console.log('clickme=' + param);
  51.       },
  52.       changebgcolor : function() {
  53.           this.styleobj.backgroundColor = "green";
  54.       },
  55.       originalcolor : function() {
  56.           this.styleobj.backgroundColor = "red";
  57.       }
  58.   }
  59. })
  60. </script>
  61. </html>
Add Comment
Please, Sign In to add comment