Vue基础3
2018-05-25 本文已影响0人
Taoyongpan
QQ截图20180525223327.png
截图的显示顺序就是代码的顺序；
html页面：
<!DOCTYPE html>
<html>
<head>
<title>Vue3</title>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div id ="vue-top">
{{ name }}
</div>
<b>v-if标签是判断的意思</b>
<div id="app-1">
<p v-if = "seen">现在你看到我了</p>
</div>
<b>v-for 指令可以绑定数组的数据来渲染一个项目列表</b>
<div id="app-2">
<ol>
<li v-for = "todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
<b>v-on 指令添加一个事件监听器</b>
<div id="app-3">
<p>{{ message }}</p>
<button v-on:click = "reverseMessage">逆转消息</button>
</div>
<b>v-model能轻松实现表单输入和应用状态之间的双向绑定</b>
<div id="app-4">
<p>{{ message }}</p>
<input type="text" v-model = "message">
</div>
<script src="index.js"></script>
</body>
</html>
js代码:
var top = new Vue({
el:'#vue-top',
data:{
name:"Taoyongpan"
}
})
var app1 = new Vue({
el:'#app-1',
data:{
seen:true
}
})
var app2 = new Vue({
el:'#app-2',
data:{
todos:[
{text:'数组测试'},
{text:'数组测试'},
{text:'数组测试'}
]
}
})
var app3 = new Vue({
el:'#app-3',
data:{
message:'Hello World!'
},
methods:{
reverseMessage : function(){
this.message = this.message.split(' ').reverse().join(' ')
}
}
})
var app4 = new Vue({
el:'#app-4',
data:{
message:"Hello Vue"
}
});
