apl-mhd

vuejs

Oct 8th, 2019
146
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Lorem Ipsum doller site ammet</title>
  8.     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.2.3/css/bulma.css">
  9. </head>
  10. <body>
  11.  
  12.  
  13.     <div id="root" class="container">
  14.  
  15.         <message title="helloworld"  body="lorem ipsum ammet"></message>
  16.         <message title="helloworld"  body="lorem ipsum ammet"></message>
  17.         <message title="helloworld"  body="lorem ipsum ammet"></message>
  18.    
  19.    
  20.     </div>
  21.  
  22.     <script src="https://unpkg.com/vue@2.1.3/dist/vue.js"></script>
  23.     <script src="main.js"></script>
  24.  
  25.  
  26.  
  27.  
  28. <!--
  29.    <script>
  30.    var app =     new Vue({
  31.  
  32.            el:'#root',
  33.  
  34.            data:{
  35.                title: 'sabi orin',
  36.  
  37.                tasks: [
  38.                
  39.                        {descriptin: 'goto shop', completed: true},
  40.                        {descriptin: 'goto UNI', completed: true},
  41.                        {descriptin: 'goto nilkhet', completed: true},
  42.                        {descriptin: 'goto newmarket', completed: false},
  43.                        {descriptin: 'goto shop', completed: false},
  44.                ],
  45.  
  46.  
  47.            },
  48.  
  49.  
  50.            computed :{
  51.  
  52.                reversedMessage(){
  53.                    return this.title.split('').reverse().join('');
  54.                } ,
  55.  
  56.  
  57.                incompletedTask(){
  58.  
  59.                    return this.tasks.filter(task => task.completed == false)
  60.                }
  61.                
  62.  
  63.            },
  64.        })
  65.    </script>
  66. -->
  67.        
  68.  
  69.  
  70.  
  71.  
  72.  
  73.  
  74.  
  75.  
  76.    
  77. </body>
  78. </html>
  79.  
  80.  
  81.  
  82.  
  83.  
  84.  
  85.  
  86. Vue.component('message',{
  87.  
  88.     props:['title', 'body'],
  89.  
  90.  
  91.     data(){
  92.  
  93.         return{
  94.  
  95.             isVisible:true,
  96.  
  97.         };
  98.  
  99.     },
  100.  
  101.     template: `
  102.    
  103.     <article class="message" v-show="isVisible">
  104.     <div class="message-header">
  105.      
  106.         {{title}}
  107.  
  108.         <button type="button"  @click="hideModal">x</button>
  109.  
  110.     </div>
  111.  
  112.     <div class="message-body">
  113.       {{body}}
  114.     </div>
  115.  
  116.  
  117.   </article>
  118.  
  119.     `,
  120.  
  121.     methods:{
  122.  
  123.         hideModal(){
  124.  
  125.             this.isVisible = false;
  126.  
  127.         },
  128.     },
  129.  
  130. });
  131.  
  132.  
  133. new Vue({
  134.  
  135.     el:'#root',
  136. })
RAW Paste Data