<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../vue/dist/vue.js"></script>
<style>
.box{
width: 150px;
height: 150px;
background-color: blueviolet;
}
.active{
background-color: aqua;
}
</style>
</head>
<body>
<div id="app"></div>
</body>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:function () {
return{
msg:'指令系統',
msg2:'<h2>指令系統2</h2>',
flag:1<2,
isClick:false,
dataList:[
{id:1,name:'羊肉串',price:8},
{id:2,name:'牛肉串',price:10},
{id:1,name:'豬肉串',price:2}
],
person:{
name:'JJ',
age:20,
fav:'video' }
}
},
template:'<div class="app">' +
'<h1>{{ msg }}</h1>' +
'<p v-text="msg"></p>' +
'<div v-html="msg2"></div>' +
'<div v-if="flag">值爲true</div>' +
'<div v-if="Math.random()>0.5">顯示</div>' +
'<div v-else>不顯示</div>' +
'<div v-show="!flag">Show</div>' +
'<div class="box" v-bind:class="{active:isClick}" v-on:click="onClick"></div>' +
'<ur>' +
'<li v-for="(item,index) in dataList">' +
'<h2>{{item.id}}</h2>' +
'<h3>{{item.name}}</h3>' +
'<em>{{item.price}}</em>' +
'</li>' +
'</ur>' +
'<ur>' +
'<li v-for="(value,key) in person">' +
'<span>{{key}} === {{value}}</span>' +
'</li>' +
'</ur>' +
'</div>',
methods:{
onClick(e){
this.isClick = this.isClick == false?true:false;
}
}
});
console.log(vm)
</script>
</html>
