Vue 入门
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/c698af6b58dc7e55a0ae86d4424c87f4.png#pic_center)
1. 样式控制
1. style和class的控制
1. class的三种控制方式
# 样式
<body>
<div id="box">
<h1>class的三种写法</h1>
<div :class="isActive?'red':'green'">class三目写法</div>
<p :class="classObj">class对象写法</p>
<p :class="classarr">class数组写法</p>
</div>
</body>
# 数据
<script>
var vm = new Vue({
el: '#box',
data: {
isActive: true,
classObj: {
red: true, green: false, font: true},
classarr: ['red', 'green'],
},
})
</script>
2. style的三种控制方式
# 样式
<body>
<div id="box">
<h1>style的三种写法</h1>
<div style="background:red">style三目写法</div>
<div :style="'background:red'">style三目写法</div>
<div :style="'background:'+'red'">style三目写法</div>
<div :style="'background:'+(isActive?'red':'green')">style三目写法</div>
<p :style="styleobj">style对象写法</p>
<p :style="styleattr">style数组写法</p>
</div>
</body>
# 数据
<script>
var vm = new Vue({
el: '#box',
data: {
isActive: true,
styleobj: {
background:'yellow',fontSize:'60px'},
styleattr: [{
background:'red'},]
},
})
</script>
2. 条件渲染
1. 通过v-if和v-for实现购物车
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="./js/vue.js"></script>
<style>
.red {
background: red;
}
.green {
background: green;
}
.font {
font-size: 30px;
}
</style>
<title>Title</title>
</head>
<body>
<div id="box">
<ul v-if="shopping.length>0">
<li v-for="data in shopping">{
{data}}</li>
</ul>
<div v-else>购物车空空如也</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#box',
data: {
shopping: ['苹果', '香蕉', '桃子'],
},
})
</script>
</html>
2. v-if/v-else-if/v-else
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="./js/vue.js"></script>
<style>
</style>
<title>Title</title>
</head>
<body>
<div id="box">
<div v-if="which==1">1111</div>
<div v-else-if="which==2">2222</div>
<div v-else>3333</div>
</div>
</body>
<script>