<html>
<head>
<link rel="stylesheet" href="hello.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<span v-if="seen">{{message}}</span><br>
<span v-bind:title="time">时间提示</span>
</div>
<div id='vforApp'>
<ol>
<li v-for="todo in todos">
{{todo.text}}
</li>
</ol>
</div>
<div id='vonApp'>
<p>{{message}}</p>
<button v-on:click="reverseMessage">逆向修改</button>
<p>{{info}}</p>
<input v-model="info">
</div>
<div id="componentApp">
<todo-item
v-for="data in groceryList"
v-bind:todo="data"
v-bind:key="data.id"
>
</todo-item>
</div>
<script src="hello.js"></script>
</body>
</html>
var app=new Vue({
el: '#app',
data:{
seen:true,
message:"Hello World!",
time:'页面加载于 ' + new Date().toLocaleString()
}
})
var vforApp=new Vue({
el: '#vforApp',
data:{
todos:[
{text:'学习java'},
{text:'学习spring'},
{text:'学习hadoop'}
]
}
})
var vonApp=new Vue({
el: '#vonApp',
data:{
message:"zou weijun",
info:'hello'
},
methods:{
reverseMessage:function(){
this.message = this.message.split('').reverse().join('');
}
}
})
Vue.component('todo-item',{
props:['todo'],
template:'<li>{{todo.text}}</li>'
})
var componentApp=new Vue({
el:'#componentApp',
data:{
groceryList:[
{id:0,text:'牛排'},
{id:1,text:'红烧肉'},
{id:2,text:'鸡蛋'}
]
}
});
743
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
