<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<!--双向数据绑定-->
<script src="../vue/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="message"><!--绑定数据模型message，文本框输入的数据会影响message数据模型，message数据模型改变，后面的插值表达式也改变-->
{{message}}<!--插值表达式-->
</div>
</body>
<script >
new Vue({
el:"#app",
data:{
message:"你好 世界"
}
})
</script>
</html>
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>v-on</title>
<script src="../vue/vue.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="点我一下" v-on:click="handle()">
</div>
</body>
<script>
new Vue({
el: "#app",
data: {},
methods: {
handle: function () {
alert("我被点击了");
}
}
})
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>if-else</title>
<script src="../vue/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text"v-model="age">经判定为
<span v-if="age<=20">大美女</span>
<span v-else-if="age>20&&age<=35">中年人</span>>
<span v-else="age>35">老年人</span>
<input type="text" v-model="age">京判定为（show）
<span v-show="age<=20">x</span>
<span v-show="age>20&&age<=35">y</span>
<span v-show="age>35">z</span>
</div>
<div id="app2">
<input type="text" v-model="age2">京判定为
<span v-if="age2<=10">你好</span>
<span v-else-if="age2>10&&age2<=20">bu好</span>
<span v-else="age2>20">很好</span>
</div>
</body>
<script>
new Vue({
data:{age:"25"},
el:"#app",
methods:{
}
})
new Vue({
data:{age2:30},
el:"#app2",
methods:{
}
})
</script>
</html>
<!DOCTYPE html>
<html lang="en" xmlns:float="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>v-for</title>
<script src="../vue/vue.js"></script>
</head>
<body>
<div id="app">
<div v-for="(addr,index) in address">{{index}}:{{addr}}</div>
<div v-for="addr in address">{{addr}}</div>
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
address:["北京","上海","杭州"]
}
})
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-if</title>
<script src="../vue/vue.js"></script>
</head>
<body>
<div id="app">
<table>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>成绩</th>
<th>等级</th>
</tr>
<tr v-for="(user,index) in users">
<td>{{index}}</td>
<td>{{user.name}}</td>
<td>{{user.age}}</td>
<td v-if="user.gender==1">男</td>
<td v-if="user.gender==2">女</td>
<td>{{user.score}}</td>
<td v-if="user.score<60">不及格</td>
<td v-if="user.score>=60&&user.score<=90">良好</td>
<td v-if="user.score>=90">优秀</td>
</tr>
</table>
</div>
</body>
<script>
new Vue({
data:{
users:[{
name:"tom",
age:20,
gender:1,
score:78
},{
name:"rose",
age:18,
gender:2,
score:23
},
{
name:"jerry",
age:21,
gender:1,
score:100
},{
name:"mike",
age:22,
gender:2,
score:120
}]
},
el:"#app",
methods:{}
}
)
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>mounted</title>
<script src="../vue/vue.js"></script>
</head>
<body>
<div id="app">
</div>
</body>
<script>
new Vue({
data:{
},
el:"#app",
mounted:(
alert("挂载完成，向服务端请求数据")
),
methods(){
}
})
</script>
</html>
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>v-on</title>
<script src="../vue/vue.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="点我一下" v-on:click="handle()">
<input type="button" value="点我一下" @click="handle()">
</div>
</body>
<script>
new Vue({
el: "#app",
data: {},
methods: {
handle: function () {
alert("我被点击了");
}
}
})
</script>
</html>
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script src="../vue/vue.js"></script>
</head>
<body>
<div id="app">
<a href="https://www.baidu.com">百度href</a>
<a v-bind:href="url">百度v-bind</a><!--绑定css或href属性-->
<a :href="url">百度:href</a>
<input type="text" v-model="url"><!-- 用于表单元素上创建双向数据绑定-->
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
url:"https://www.baidu.com"
}
})
</script>
</html>```
143
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
