Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!doctype html>
- <html class="no-js" lang="">
- <head>
- <meta charset="utf-8">
- <meta http-equiv="x-ua-compatible" content="ie=edge">
- <title>Vue</title>
- <meta name="description" content="">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <style>
- body {
- background: #20262E;
- padding: 20px;
- font-family: Helvetica;
- }
- #boxes {
- background: #fff;
- border-radius: 4px;
- padding: 20px;
- transition: all 0.2s;
- }
- section {
- width: 100%;
- display: flex;
- flex-direction: row;
- justify-content: space-between;
- }
- .abc {
- margin: 8px 0;
- display: block;
- padding: 20px;
- border: 1px solid black;
- }
- h2 {
- font-weight: bold;
- margin-bottom: 15px;
- }
- </style>
- </head>
- <body>
- <?php
- $boxes = [
- ["text" => "Learn JavaScript"],
- ["text" => "Learn Vue"],
- ["text" => "Play around in JSFiddle"],
- ["text" => "Build something awesome"],
- ];
- ?>
- <div id="boxes">
- <section>
- <?php
- foreach ($boxes as $key => $box) {
- echo '<box text="'.$box['text'].'"><div class="abc"><span>'.$box['text'].'</span></div></box>';
- }
- ?>
- </section>
- </div>
- <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
- <script>
- Vue.component('box', {
- data: function () {
- return {
- text: ""
- }
- },
- props: ['text'],
- template: '<div class="abc"><span v-text="text"></span></div>'
- });
- new Vue({ el: "#boxes" })
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement