前端Vue的基础操作(一)
1. v-model
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Jerome</title>
<!--1.引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
</head>
<!-- v-model
v-model用于表单数据的双向绑定，其实它就是一个语法糖，这个背后就做了两个操作：
1. v-bind绑定一个value属性
2. v-on指令给当前元素绑定input事件
-->
<body>
<div id="app">
<input type="text" v-model="message"/>
{{message}}
</div>
<script>
var vue = new Vue({
el: "#app",
/*model数据*/
data: {
message: "hello,Jerome"
}
});
</script>
</body>
</html>
2. v-bind
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Jerome</title>
<!--1.引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
</head>
<!-- v-bind 绑定对象 -->
<body>
<div class="app">
<a :href="url">Jerome图床</a> <!-- v-bind:href 简化语句 :href-->
</div>
<script>
var app = new Vue({
el: '.app',
data: {
url: "https://www.bree.vip/",
}
});
</script>
</body>
</html>
3. v-if else if else
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Jerome</title>
<!--1.引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
</head>
<!-- v-if else 判断 -->
<body>
<div id="app">
<div v-if="role==='Jerome'|| role==='Jerome-admin'">您好，Jerome</div>
<div v-else-if="role==='JeromeImg'">Jerome图床</div>
<div v-else>您无权访问！</div>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
role: "Jerome", // 取决于该值
}
});
</script>
</body>
</html>
4. v-for 循环列表数据
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Jerome</title>
<!--1.引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
</head>
<!-- v-for 循环列表 -->
<body>
<div id="app">
<p v-for="(item,index) in list">值:{{item}}----索引:{{index}}</p>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
list: ["a", "b", "c", "d", "e"],
}
});
</script>
</body>
</html>
5. v-for 循环列表内对象数据
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Jerome</title>
<!--1.引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
</head>
<!-- v-for 列表对象 -->
<body>
<div id="app">
<p v-for="(user,index) in list">{{user.id}}---{{user.name}}-----索引:{{index}}</p>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
list: [
{id: 1, name: 'qizia'},
{id: 2, name: 'jerome'},
{id: 3, name: 'papyboy'}
],
}
});
</script>
</body>
</html>
6. v-for 循环对象数据
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Jerome</title>
<!--1.引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
</head>
<!-- v-for 循环对象 -->
<body>
<div id="app">
<p v-for="(val,key,index) in user">值：{{val}}---键：{{key}}-----索引:{{index}}</p>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
user: {
name: "Jerome",
age: "18",
sex: "男"
}
}
});
</script>
</body>
</html>
7. v-for 循环数字数据
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Jerome</title>
<!--1.引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
</head>
<!-- v-for 循环数字 -->
<body>
<div id="app">
<p v-for="count in 5">这是第{{count}}次循环</p>
</div>
<script>
var app = new Vue({
el: "#app",
data: {}
});
</script>
</body>
</html>
