基本指令: 插值、v-bind、v-if、v-for、v-on、v-model
<body>
<div id='app'>
<div>{{ message }}</div>
<div v-bind:title="title">鼠标悬停几秒钟查看此处动态绑定的提示信息！</div>
<div v-if='seen'>现在你看到我</div>
<ul>
<li v-for="todo in todos">
{{todo.text}}
</li>
</ul>
<div>
<p>{{ message }}</p>
<button v-on:click="reverMessage">逆转消息</button>
</div>
<div>
<input v-model="message">
</div>
</div>
<script src="../vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'hello Vue',
title: '页面加载于' + new Date(),
seen: true,
todos: [
{text: '学习 JavaScript'},
{text: '学习 Vue'},
{text: '整个牛项目'}
]
},
methods: {
reverMessage:function(){
this.message = this.message.split('').reverse().join('')
}
}
})
</script>
</body>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
