greathector7

basico con vue

Dec 7th, 2021
797
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <title>VueJs</title>
  7.     <link rel="stylesheet" href="js/bulma.min.css">
  8. </head>
  9. <body>
  10. <section id="app" class="hero is-light is-bold is-fullheight">
  11.     <div class="hero-body">
  12.         <div class="container">
  13.             <h1 class="title">Vue</h1>
  14.             <h2 class="subtitle">By Kotoki</h2>
  15.        
  16.                 <table class="table is-fullwidth">
  17.                     <tbody>
  18.                         <tr v-for="item in items">
  19.                             <td>{{item.name}}</td>
  20.                             <td>
  21.                                 <a v-bind:href="item.web">visitar webs</a>
  22.                             </td>
  23.                             <td>{{item.salary}}</td>
  24.                             <td>
  25.                                 <span v-if="item.enabled" class="has-text-success" >Activo</span>
  26.                                 <span v-else class="has-text-danger">Inactivo</span>
  27.                             </td>
  28.                         </tr>
  29.                     </tbody>
  30.                     <tfoot>
  31.                         <td>
  32.                             <input v-model="newEntry.name" type="text" class="input" placeholder="Nombre" />
  33.                         </td>
  34.                         <td>
  35.                             <input v-model="newEntry.web" type="text" class="input" placeholder="Web" />
  36.                         </td>
  37.                         <td>
  38.                             <input v-model="newEntry.salary" type="number" class="input" placeholder="Sueldo" />
  39.                         </td>
  40.                         <td class="text-right">
  41.                             <button v-bind:click="add_item" type="button" class="button is-fullwidth">Agregar</button>
  42.                         </td>
  43.                     </tfoot>
  44.                 </table>
  45.                         </div>
  46.                     </div>
  47.  
  48.                 </section>
  49. <script src="js/vue.js"></script>
  50.  
  51. <script>
  52.     const app = new Vue({
  53.         el: "#app",
  54.         data: {
  55.             items: [  
  56.             ],
  57.  
  58.             newEntry: {
  59.                 name:'',
  60.                 web:'',
  61.                 salary:0,
  62.                 enabled: true,
  63.             }
  64.         },  // end data
  65.        
  66.         methods: {
  67.             add_item() {
  68.                 this.items.push({
  69.                     name:    this.newEntry.name,
  70.                     web:     this.newEntry.web,
  71.                     salary:  this.newEntry.salary,
  72.                     enabled: this.newEntry.enabled,
  73.                 });
  74.                 this.newEntry.name = '';
  75.                 this.newEntry.web = '';
  76.                 this.newEntry.salary = 0;
  77.                 this.newEntry.enabled = true;
  78.  
  79.             },   // end add
  80.         }, // end methods
  81.  
  82.  
  83.  
  84.  
  85. }) // end apps
  86.  
  87.                 // {name: 'eduardo', web:'http://www.google.com', enabled: true},
  88.                 // {name: 'miranda', web:'http://www.google.com', enabled: true},
  89.                 // {name: 'sofia', web:'http://www.google.com', enabled: true},
  90.                 // {name: 'gabriel', web:'http://www.google.com', enabled: false}
  91.  
  92. </script>
  93.  
  94.  
  95. </body>
  96. </html>
RAW Paste Data