|
|
|
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<script src="https://unpkg.com/vue"></script> |
|
|
|
|
|
<div class="om-content"> |
|
|
|
|
|
<div id="mewmessages-example"> |
|
|
|
|
|
<div |
|
|
|
|
|
is="msg-item" |
|
|
|
|
|
v-for="(msg, index) in messages" |
|
|
|
|
|
v-bind:key="msg.id" |
|
|
|
|
|
v-bind:title="msg.title" |
|
|
|
|
|
v-bind:subject="msg.subject" |
|
|
|
|
|
v-bind:tag="msg.tag" |
|
|
|
|
|
v-bind:user="msg.user" |
|
|
|
|
|
></div> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
<script src="./home.js"></script> |
|
|
|
|
|
|
|
|
<!--first try of vue.js data-binding |
|
|
<!--first try of vue.js data-binding |
|
|
<div class="om-content"> |
|
|
<div class="om-content"> |
|
|
<div id="sample"> |
|
|
<div id="sample"> |
|
|
<div class="om-card card" v-for="msgs in private.messages"> |
|
|
<div class="om-card card" v-for="msgs in private.messages"> |
|
|
<div v-for="elements in msgs.message"> |
|
|
<div v-for="elements in msgs.message"> |
|
|
<h6 class="msg-head"> |
|
|
|
|
|
<b>{{elements.subject}}</b> |
|
|
|
|
|
<img src="favicon.ico" width=20px height=20px> |
|
|
|
|
|
</h6> |
|
|
|
|
|
<p>{{elements.msg}}<br> |
|
|
|
|
|
|
|
|
<h6 class="msg-head"> |
|
|
|
|
|
<b>{{elements.subject}}</b> |
|
|
|
|
|
<img src="favicon.ico" width=20px height=20px> |
|
|
|
|
|
</h6> |
|
|
|
|
|
<p>{{elements.msg}} |
|
|
<a href="#">{{elements.tags}}</a></p> |
|
|
<a href="#">{{elements.tags}}</a></p> |
|
|
<div class="om-user-line"> |
|
|
|
|
|
<i class="material-icons">account_circle</i> |
|
|
|
|
|
Erstellt von {{elements.user}} |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
{{elements.user}} |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="om-user-line"> |
|
|
|
|
|
<i class="material-icons">account_circle</i> |
|
|
|
|
|
Erstellt von |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
--> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
--> |
|
|
|
|
|
|
|
|
<!--HTML Mockup |
|
|
<!--HTML Mockup |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script src="https://unpkg.com/bootstrap-material-design@4.1.1/dist/js/bootstrap-material-design.js" integrity="sha384-CauSuKpEqAFajSpkdjv3z9t8E7RlpJ1UP0lKM/+NdtSarroVKu069AlsRPKkFBz9" crossorigin="anonymous"></script> |
|
|
<script src="https://unpkg.com/bootstrap-material-design@4.1.1/dist/js/bootstrap-material-design.js" integrity="sha384-CauSuKpEqAFajSpkdjv3z9t8E7RlpJ1UP0lKM/+NdtSarroVKu069AlsRPKkFBz9" crossorigin="anonymous"></script> |
|
|
<!-- NOTE: Call main.js --> |
|
|
<!-- NOTE: Call main.js --> |
|
|
<script src="main.js"></script> |
|
|
<script src="main.js"></script> |
|
|
<script> |
|
|
|
|
|
new Vue({ |
|
|
|
|
|
el: '#sample', |
|
|
|
|
|
data: { |
|
|
|
|
|
private: { |
|
|
|
|
|
messages : [ |
|
|
|
|
|
{ |
|
|
|
|
|
message : [ |
|
|
|
|
|
{subject : 'Betreff_1'}, |
|
|
|
|
|
{ msg : 'Nachricht_1' }, |
|
|
|
|
|
{ tags : '#tag_1' }, |
|
|
|
|
|
{ user : 'user_1' } |
|
|
|
|
|
] |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
message : [ |
|
|
|
|
|
{subject : 'Betreff_2'}, |
|
|
|
|
|
{ msg : 'Nachricht_2' }, |
|
|
|
|
|
{ tags : '#tag_2' }, |
|
|
|
|
|
{ user : 'user_2' } |
|
|
|
|
|
] |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
message : [ |
|
|
|
|
|
{subject : 'Betreff_3'}, |
|
|
|
|
|
{ msg : 'Nachricht_3' }, |
|
|
|
|
|
{ tags : '#tag_3' }, |
|
|
|
|
|
{ user : 'user_3' } |
|
|
|
|
|
] |
|
|
|
|
|
} |
|
|
|
|
|
] |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
}) |
|
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</body> |
|
|
</body> |
|
|
|
|
|
|