sonus · August 9, 2016 11:17 · sonus · Aug 9, 2016
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">

 <head>
    <meta charset="UTF-8">
    <title>Document</title>
 </head>
 <div id="app">
    <h1 v-text="title"></h1>
    <input type="" v-model="title" name="">
    <ul>
        <li v-for="todo in todos" v-text="todo.text"></li>
    </ul>
    <button @click="reverseMessage" v-text="tbuttons.title"></button>
    <button @click="reverseList" v-text="tbuttons.list"></button>
    <button @click="reverseEverythin" v-text="tbuttons.all"></button>
 </div>

 <body>
    <script type="text/javascript" src="https://vuejs.org/js/vue.min.js"></script>
    <script type="text/javascript">
    const reverseIt = s => s.split('').reverse().join('');
    new Vue({
        el: '#app',
        data: {
            title: "Sample is here",
            tbuttons: {
                title: 'Reverse Title',
                list: 'Reverse List',
                all: 'Reverse Everythin'
            },
            todos: [{
                text: 'I am here'
            }, {
                text: 'she is here'
            }, {
                text: 'he is here'
            }, {
                text: 'we are here'
            }]
        },
        methods: {
            reverseMessage: function() {
                this.title = reverseIt(this.title)
            },
            reverseList: function() {
                this.todos.forEach(todo => todo.text = reverseIt(todo.text))
            },
            reverseEverythin: function() {
                this.reverseMessage();
                this.reverseList();
                Object.keys(this.tbuttons).forEach(button => this.tbuttons[button] = reverseIt(this.tbuttons[button]));
            }
        }
    })
    </script>
 </body>

 </html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<title>Document</title>
	</head>
	<div id="app">
	<h1 v-text="title"></h1>
	<input type="" v-model="title" name="">
	<ul>
	<li v-for="todo in todos" v-text="todo.text"></li>
	</ul>
	<button @click="reverseMessage" v-text="tbuttons.title"></button>
	<button @click="reverseList" v-text="tbuttons.list"></button>
	<button @click="reverseEverythin" v-text="tbuttons.all"></button>
	</div>

	<body>
	<script type="text/javascript" src="https://vuejs.org/js/vue.min.js"></script>
	<script type="text/javascript">
	const reverseIt = s => s.split('').reverse().join('');
	new Vue({
	el: '#app',
	data: {
	title: "Sample is here",
	tbuttons: {
	title: 'Reverse Title',
	list: 'Reverse List',
	all: 'Reverse Everythin'
	},
	todos: [{
	text: 'I am here'
	}, {
	text: 'she is here'
	}, {
	text: 'he is here'
	}, {
	text: 'we are here'
	}]
	},
	methods: {
	reverseMessage: function() {
	this.title = reverseIt(this.title)
	},
	reverseList: function() {
	this.todos.forEach(todo => todo.text = reverseIt(todo.text))
	},
	reverseEverythin: function() {
	this.reverseMessage();
	this.reverseList();
	Object.keys(this.tbuttons).forEach(button => this.tbuttons[button] = reverseIt(this.tbuttons[button]));
	}
	}
	})
	</script>
	</body>

	</html>