通过帮顶css赋予样式
<style>
.aa{
color: red;
}
.nn{
color: rgb(45, 42, 209);
}
</style>
</head>
<body>
<div id="app">
<!-- 绑定数据 -->
<h2 :class="bbb">class</h2>
<!-- 绑定数组 -->
<h2 :class="['aa']">class</h2>
<!-- 绑定对象 -->
<h2 :class="{'nn':true}">class</h2>
<h2 :class="obj">class</h2>
<!-- 绑定行间样式 -->
<h2 :style="obj2">class</h2>
<h2 :style="{'color':'#fc9'}">class</h2>
</div>
<script src="./js/vue.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
bbb:'aa',
obj:{'nn':true},
obj2:{'color':'#fc9'}
}
})
</script>
v-for
<div id="app">
<ul>
<!--
遍历对象
item:对象属性值，
key ：对象属性名
-->
<li v-for="(item, key) in user" :key="key">{{key}}，{{item}}</li>
<!--
遍历数组
item ：数组便利出来的值
index：索引值
-->
<li v-for="(item, index) in arr" :key="index">{{item}}，{{index}}</li>
<!--
遍历对象数组
item ：遍历出来的对象
index:索引值
-->
<li v-for="(item, index) in list" :key="index">{{item}}，{{index}}</li>
</ul>
</div>
<script src="./js/vue.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
user: {
id: '1101',
name: '张三',
age: 33,
birthday: new Date()
},
arr: [6, 7, 8, 9, 5, 7, 10],
list: [
{ id: '1101', name: '张三', age: 33, birthday: new Date() },
{ id: '1101', name: '张三', age: 33, birthday: new Date() },
{ id: '1101', name: '张三', age: 33, birthday: new Date() },
{ id: '1101', name: '张三', age: 33, birthday: new Date() }
]
}
})
</script>
练习：添加成员
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<input type="text" placeholder="用户ID" v-model="id">
<input type="text" placeholder="用户昵称" v-model="nickname">
<button @click="insert">添加</button>
<br><br>
<table border="2" cellspacing="0" cellpadding="10">
<thead>
<tr>
<th>用户ID</th>
<th>用户昵称</th>
<th>日期</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in list" :key="index">
<td>{{item.id}}</td>
<td>{{item.nickname}}</td>
<td>{{item.birthday}}</td>
</tr>
</tbody>
</table>
</div>
<script src="./js/vue.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
id:'',
nickname:'',
list:[]
},
methods: {
insert(){
var obj={
'id':this.id,
'nickname':this.nickname,
'birthday':new Date()
}
this.list.push(obj);
}
},
})
</script>
</body>
</html>
v-if和v-show
<div id="app">
<!-- 不经常改变做判断的用v-if -->
<h1 v-if="flg">这是v-if</h1>
<!-- 经常做切换显示或消失的用v-show -->
<h1 v-show="flg">这是v-show</h1>
</div>
<script src="./js/vue.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
flg:true,
}
})
</script>
v-if补充
<div id="app">
<h1 v-if="score>60">管理员</h1>
<h1 v-else-if="condition">管理员</h1>
<h1 v-else="score<60">普通用户</h1>
</div>
<script src="./js/vue.js"></script>
<script>
var vm = new Vue({
el : "#app",
data : {
score:55
}
})
</script>
网友评论