Commit c7771f65 authored by Michael Jörg's avatar Michael Jörg

List Rendering

parent 1b7719d9
module.exports = {
env: {
browser: true,
es6: true
},
extends: [
'plugin:vue/essential',
'standard'
],
globals: {
Atomics: 'readonly',
SharedArrayBuffer: 'readonly'
},
parserOptions: {
ecmaVersion: 11,
sourceType: 'module'
},
plugins: [
'vue'
],
rules: {
}
}
node_modules
<!DOCTYPE html>
<html lang="de">
<head>
<title>Vue.js Guide</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<h1>List Rendering</h1>
<h2>Mapping an Array to Elements with v-for</h2>
<ul id="app1">
<li v-for="item in items" :key="item.message">
{{ item.message }}
</li>
</ul>
<ul id="app2">
<li v-for="(item, index) in items">
{{ parentMessage }} - {{ index }} - {{ item.message }}
</li>
</ul>
<h2>v-for with an Object</h2>
<ul id="v-for-object" class="demo">
<li v-for="(value, name, index) in object">
{{ index }}. {{ name }}: {{ value }}
</li>
</ul>
<script>
var app1 = new Vue({
el: "#app1",
data: {
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
});
var example2 = new Vue({
el: '#app2',
data: {
parentMessage: 'Parent',
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
})
new Vue({
el: '#v-for-object',
data: {
object: {
title: 'How to do lists in Vue',
author: 'Jane Doe',
publishedAt: '2016-04-10'
}
}
})
</script>
</body>
</html>
\ No newline at end of file
This diff is collapsed.
{
"name": "vue",
"version": "1.0.0",
"description": "- Installation - Introduction - The Vue Instance - Template Syntax - Computed Properties and Watchers",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+ssh://[email protected]/100-days-of-code/vue.git"
},
"author": "",
"license": "ISC",
"bugs": {
"url": "https://gitlab.com/100-days-of-code/vue/issues"
},
"homepage": "https://gitlab.com/100-days-of-code/vue#readme",
"devDependencies": {
"eslint": "^7.1.0",
"eslint-config-standard": "^14.1.1",
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-standard": "^4.0.1",
"eslint-plugin-vue": "^6.2.2"
}
}
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment