二.Vue.js起步练习
2019-03-06 本文已影响0人
A_x_A
1 数据绑定
1.1数据的双向绑定
<html>
<head>
<meta charset="utf-8" />
<title>Vue.js起步</title>
<!-- 通过CDN引入Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- vue-app的根容器 -->
<div id="app">
<input type="text" v-model="name" placeholder="请输入" />
<h2>你好，{{name}}</h2>
</div>
<script type="text/javascript" charset="utf-8">
//实例化一个Vue对象
var app = new Vue({
el:'#app',
data:{
name:'qaz'
}
})
</script>
</body>
</html>
-
红色部分都可以更改，使绿色部分改变
Vue起步.png
2 条件循环
- 条件渲染指令：v-if , v-else-if , v- else(适合条件不经常变更的场景)可以根据表达式的值在DOM中渲染或销毁元素/组件,与v-show不同的是，v-if是真正的条件渲染
- v-show:简单的CSS属性切换(适用于频繁切换条件)
v-if举例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 通过CDN引入Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>v-if举例练习</title>
</head>
<body>
<!-- vue-app的根容器 -->
<div id="app">
<p v-if="status === 1">当status为1时，显示该行</p>
<p v-else-if="status === 2">当status为2时显示该行</p>
<p v-else>否则显示该行</p>
</div>
<script type="text/javascript">
//实例化一个Vue对象
var app = new Vue({
el:'#app',
data:{
status:1
}
})
</script>
</body>
</html>
v-show举例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-show举例练习</title>
<!-- 通过CDN引入Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- vue-app的根容器 -->
<div id="app">
<p v-show="status === 1">当status为1时，显示该行</p>
</div>
<script type="text/javascript">
//实例化一个Vue对象
var app = new Vue({
el:'#app',
data:{
status:1
}
})
</script>
</body>
</html>
条件与循环结合的一个综合例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- 通过cdn引入vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style type="text/css">
.container {
display: flex;
width: 80%;
margin: 0 auto;
}
.card {
width: 500px;
height: 500px;
margin-right: 30px;
border: 1px solid greenyellow;
border-radius: 10px;
text-align: center;
}
.card img {
width: 100%;
height: 100%;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.like{
color: green;
font-weight: bold;
}
.no-like{
color: red;
}
</style>
</head>
<body>
<!-- vue-app根容器 -->
<div id="app">
<h2 v-if="show">显示图书信息</h2>
<div class="container">
<!-- 循环遍历books数组 -->
<div class="card" v-for="book in books">
<!-- 显示图片名称 -->
<h4>{{book.name}}</h4>
<!-- 绑定图书封面属性 -->
<img :src="book.cover">
<!-- 绑定like的值显示不同的文字 -->
<p v-if="book.like" class="like">喜欢</p>
<p v-else class="no-like">不喜欢</p>
</div>
</div>
</div>
<script type="text/javascript">
//实例化一个vue对象
var app = new Vue({
el: '#app',
data: {
show: true,
books: [
{
name: '且在人间',
cover: 'img/book1.jpg',
like: false
},
{
name: '妻妾成群',
cover: 'img/book2.jpg',
like: true
},
{
name: '无名盛宴',
cover: 'img/book3.jpg',
like: true
},
{
name: '觉醒众神',
cover: 'img/book4.jpg',
like: false
}
]
}
})
</script>
</body>
</html>
