<html>
<head>
<title>永远朋友</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id = "app">
<input type="text" v-model="message">
{{ message }}
</div>
</body>
<script>
new Vue({
el : "#app",
data : {
message:"hello vue!"
}
})
</script>
</html>
<html>
<head>
<script src = "../js/vue.js"></script>
</head>
<body>
<div id="app">
<a v-bind:href = "u">链接1</a>
<a :href= "u">链接2</a>
<input type="text" v-model="u">
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
u:"https://www.baidu.com"
}
})
</script>
</html>
<html>
<head>
<script src="../js/vue.js"></script>
</head>
<body>
<div id = "app">
<table border="1" cellspacing="0" width="60%">
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>成绩</th>
<th>等级</th>
</tr>
<tr align="center" v-for="(user, index) in users">
<td>{{index+1}}</td>
<td>{{user.name}}</td>
<td>{{user.age}}</td>
<td><span v-if="user.gender == 2">女</span>
<span v-else="user.gender == 1">男</span></td>
<td>{{user.socre}}</td>
<td><span v-if="user.socre < 60" style="color: red;">不及格</span>
<span v-else-if="user.socre >= 60 && user.socre < 80">及格</span>
<span v-else="user.socre >= 80">优秀</span></tr>
</tr>
</table>
</div>
</body>
<script>
new Vue({
el : "#app",
data : {
users:[{
name:"Tom",
age:18,
gender:1,
socre:99
},{
name:"john",
age:19,
gender:2,
socre:79
},{
name:"ave",
age:23,
gender:2,
socre:56
} ]
},
})
</script>
</html>