<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 示例</title>
</head>
<body>
<!-- <ul v-for="book in books" :key='index'>
<li>{{book.name}}</li>
</ul> -->
<div id="app">
<ul v-for="(item,index) in books" :key='index'>
<li>{{item.name}}</li>
</ul>
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
var app = new Vue({
el: '#app',
data() {
return {
books: [{ name: 'asda' }, { name: 'asdas' }],
}
}
// computed: {
// classes: function () {
// return {
// active: this.isActive && !this.error,
// 'text-fail': this.error && this.error.type ==='fail'
// }
// }
// }
// computed: {
// fullName: {
// // Getter, 用于读取
// get: function () {
// return this.fistName + ',' + this.lastName;
// },
// // Setter,写入时触发
// set: function (newValue) {
// var names = newValue.split(',');
// this.fistName = names[0];
// this.lastName = names[names.length - 1];
// }
// }
// }
})
</script>
</body>
<style>
.active {
color: red !important
}
.abc {
color: beige
}
</style>
</html>