列表渲染

  根据我例子的需要,先来说下,列表渲染使用到的是v-for指令,需要使用 item in items 形式的特殊语法,items 是源数据数组并且 item 是数组元素迭代的别名,具体使用方法如下:

<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>vue列表渲染</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
<style>
</style>
</head> <body>
<div class="myApp">
<table v-for="items in students">
<tr>
<td>{{items.name}}</td>
<td>{{items.score}}</td>
</tr>
</table>
</div>
<script>
var myApp = new Vue({
el: '.myApp',
data: {
students:[{
name: '阿美',
score: 95
},{
name: '美美',
score: 85
},{
name: '大美',
score: 95
},{
name: '中美',
score: 75
}]
} });
</script>
</body> </html>

  上面的例子,就是最基本的使用v-for进行列表渲染的示例。此外,v-for 还支持一个可选的第二个参数为当前项的索引index,如<li v-for="(item, index) in items">,也可以用 of 替代 in 作为分隔符,还有第三个可选参数键名key,如<div v-for="(value, key) in object">,下面,我们把这三个参数全都用上,看看效果:

<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>vue列表渲染</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
<style>
</style>
</head> <body>
<div class="myApp">
<table v-for="(items, key, index) in students">
<tr>
<td>{{index}}</td>
<td>{{key}}</td>
<td>{{items.name}}</td>
<td>{{items.score}}</td>
</tr>
</table>
</div>
<script>
var myApp = new Vue({
el: '.myApp',
data: {
students: {
laoer: {
name: '阿美',
score: 95
},
laoda: {
name: '美美',
score: 85
},
laosi: {
name: '大美',
score: 95
},
laosan: {
name: '中美',
score: 75
}
}
} });
</script>
</body> </html>

  上面的例子,在浏览器中渲染出来的效果如下:

  我以我大学室友为数据源,第一排是数据的索引,第二排是每个人的排行,第三排是昵称,第四排是成绩,哈哈,成绩是瞎写的~~

  用来进行列表渲染的数据,可以是数组,也可以是对象,还可以将数组和对象结合。上面说的是v-for的基本用法,下面我们来分别了解一下当数据源为数组或者对象时,他们的更新和检测方法,当数据源为数组时,更新的方法我们根据是否会改变原数组来区分,使用后会改变原数组的方法,叫做变异方法,有push()、pop()、shift()、unshift()、splice()、sort()、reverse(),不改变原数组返回新数组的方法叫做替换数组,有filter()、concat()、slice()。具体使用方法,我们各举一个例子:

  变异方法push()例子:

  替换方法slice()例子:

  注意,当数据源为数组时,如果我们利用索引值设置某项数据或者利用length属性设置数组长度时,不能动态监测数据的变动,也就是说不能动态展示调整的数据,如果遇到使用索引修改指定项的情况,我们使用以下三种方法来实现:

  Vue.set(vm.items, indexOfItem, newValue)

  vm.items.splice(indexOfItem, 1, newValue)

  vm.$set(vm.items, indexOfItem, newValue)

  如果要动态改变数组长度,可以使用 vm.items.splice(newLength) 来实现。

  当数据源为对象时,我们要动态的给已经存在的属性值添加一条新值的话,需要用以下方法:

  Vue.set(myApp.students, 'age', 27);

  vm.$set(myApp.students, 'age', 27);

  如果我们要动态的给已经存在的属性值添加多条新值的话,需要用以下方法:

  myApp.students = Object.assign({}, myApp.students, {
    age: 27,
    favoriteColor: 'Vue Green'
  });

  有时,我们想要显示一个数组的过滤或排序副本,而不实际改变或重置原始数据。在这种情况下,可以创建返回过滤或排序数组的计算属性。

  例如:

  <li v-for="n in evenNumbers">{{ n }}</li>

data: {
numbers: [ 1, 2, 3, 4, 5 ]
},
computed: {
evenNumbers: function () {
return this.numbers.filter(function (number) {
return number % 2 === 0
})
}
}

  在计算属性不适用的情况下 (例如,在嵌套 v-for 循环中) 你可以使用一个 method 方法:

    <li v-for="n in even(numbers)">{{ n }}</li>

data: {
numbers: [ 1, 2, 3, 4, 5 ]
},
methods: {
even: function (numbers) {
return numbers.filter(function (number) {
return number % 2 === 0
})
}
}

  以上就是v-for指令用于渲染列表的主要用法。

  class与style绑定

  绑定class和style(行内样式),使用到的是v-bind指令,具体语法有三种,对象语法、数组语法、对象和数组结合使用的语法。具体用法就是v-bind:class="{...}",v-bind:style="{...}",在花括号里面,写那个传递过来的对象,可以是值,语句或者计算属性,当然我举得例子用的花括号是对象,也可以用数组或者根据需要用对象和数组结合使用的语法。下面的例子,我是用方法来控制样式显示的,大家可以参考,实现的方法有很多,条条大路通罗马:

<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>vue列表渲染</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
<style>
.you{
color: green;
}
.liang{
color: orange;
}
.jige{
color: pink
}
.bujige{
color: red
}
</style>
</head> <body>
<div class="myApp">
<table v-for="items in students">
<tr v-bind:class="classObj(items.score)">
<td>{{items.name}}</td>
<td>{{items.score}}</td>
</tr>
</table>
</div>
<script>
var myApp = new Vue({
el: '.myApp',
data: {
students:[{
name: '阿美',
score: 95
},{
name: '美美',
score: 85
},{
name: '大美',
score: 95
},{
name: '中美',
score: 75
}]
},
methods:{
classObj: function (scoreVal) {
var className = '';
if(scoreVal >= 90){
className = 'you';
} else if (scoreVal >= 80 && scoreVal < 90){
className = 'liang';
} else if(scoreVal >= 60 && scoreVal < 80){
className = 'jige';
} else {
className = 'bujige';
}
return className;
}
}
});
</script>
</body> </html>

  上面是绑定class的小栗子~其实绑定style也是一样的,只不过class传的是类名,style传的是样式而已。

  条件渲染

  条件渲染,就是根据条件去判断是否渲染,使用到的指令有v-if、v-else-if、v-else、v-show,使用时需要注意的就是v-else和v-else-if必须紧跟在带 v-if 或者 v-else-if 的元素之后使用,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。下面我们简单的用下试试:

<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>vue列表渲染</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
</head> <body>
<div class="myApp">
<table v-for="items in students">
<tr v-if="items.score > 80">
<td>{{items.name}}</td>
<td>{{items.score}}</td>
</tr>
</table>
</div>
<script>
var myApp = new Vue({
el: '.myApp',
data: {
students:[{
name: '阿美',
score: 95
},{
name: '美美',
score: 85
},{
name: '大美',
score: 95
},{
name: '中美',
score: 75
}]
}
});
</script>
</body> </html>

vue class与style绑定、条件渲染、列表渲染的更多相关文章

  1. Vue学习计划基础笔记(三)-class与style绑定,条件渲染和列表渲染

    Class与style绑定.条件渲染和列表渲染 目标: 熟练使用class与style绑定的多种方式 熟悉v-if与v-for的用法,以及v-if和v-for一起使用的注意事项 class与style ...

  2. 02 . Vue入门基础之条件渲染,列表渲染,事件处理器,表单控件绑定

    vue基础 声明式渲染 Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统 Example1 <!DOCTYPE html> <html> ...

  3. 【vue2】Style和Class,条件,列表渲染,双向数据绑定,事件处理

    目录 1.style和class 2. 条件渲染 2.1 指令 2.2 案例 3. 列表渲染 3.1 v-for:放在标签上,可以循环显示多个此标签 3.2 v-for 循环数组,循环字符串,数字,对 ...

  4. Vue#Class 与 Style 绑定

    绑定HTMLCLASS 在我没看这之前,我觉得要写绑定class ,应该像绑定数据一样这么写 class ={{class-a}} 看官方教程时,不推荐这么写,推荐这样 v-bind:class=&q ...

  5. vue入门:(v-for指令与列表渲染)

    v-for渲染列表 维护状态 数组变异方法与替换数组 $set.$remove 对象属性实现列表渲染 一.v-for渲染列表 语法:v-for="item in items" 先来 ...

  6. React 学习(五) ---- 条件和列表渲染

    条件渲染 React中的条件渲染和我们平常写的js 代码一样,都是用的if else, 只不过在if else 中它的返回值是jsx, 根据不同的条件渲染不同的UI. 先写两个组件 //登录的用户显示 ...

  7. vue class与style 绑定详解——小白速会

    一.绑定class的几种方式 1.对象语法 直接看例子: <div id="app3"> <div :class="{'success':isSucce ...

  8. Vue.js学习笔记 第四篇 列表渲染

    遍历数组和对象 和条件选择一样,循环也和其他语言类似,也尝试着用一个例子解决问题 <!DOCTYPE html> <html> <head> <meta ch ...

  9. Vue 使用v-bind:style 绑定样式

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. luogu2604 [ZJOI2010]网络扩容

    先做一遍普通的dinic 然后再更改源点为超级源,超级源向原源加一条capacity=k && cost=0的边,再加上有费用的边跑最小费用最大流 #include <iostr ...

  2. TOJ 5065: 最长连续子序列

    5065: 最长连续子序列   Time Limit(Common/Java):1000MS/3000MS     Memory Limit:65536KByteTotal Submit: 140   ...

  3. shell-001

    for: shell_test #!/bin/bash var= var=$var+ echo $var mkdir only_a_joke shell_joke #!/bin/bash ./shel ...

  4. 九度oj 题目1099:后缀子串排序

    题目描述: 对于一个字符串,将其后缀子串进行排序,例如grain其子串有:grain rain ain in n 然后对各子串按字典顺序排序,即: ain,grain,in,n,rain 输入: 每个 ...

  5. 【Luogu】P1119灾后重建(Floyd)

    题目链接 见题解: feilongz. 这里只放代码. #include<cstdio> #include<cstring> #include<cstdlib> # ...

  6. 刷题总结——魔术球问题(ssoj最小路径覆盖+网络流)

    题目: 题目描述 假设有 n 根柱子,现要按下述规则在这 n 根柱子中依次放入编号为 1,2 ,3,… 的球.(1)每次只能在某根柱子的最上面放球.(2)在同一根柱子中,任何 2 个相邻球的编号之和为 ...

  7. 【Codevs1907】方格取数3(最小割)

    题意:在一个有m*n 个方格的棋盘中,每个方格中有一个正整数.现要从方格中取数,使任意2 个数所在方格没有公共边,且取出的数的总和最大.试设计一个满足要求的取数算法. n,m<=30 思路:如果 ...

  8. (转)java 中变量存储位置总结

    1.寄存器:最快的存储区, 由编译器根据需求进行分配,我们在程序中无法控制. 2. 栈:存放基本类型的变量数据和对象的引用,但对象本身不存放在栈中,而是存放在堆(new 出来的对象)或者常量池中(字符 ...

  9. msp430项目编程47

    msp430综合项目---有线采集传输平台系统47 1.电路工作原理 2.代码(显示部分) 3.代码(功能实现) 4.项目总结

  10. Yii 之视图布局

    控制器代码: //设置的布局文件 public $layout = 'common'; public function actionAbout(){ $data = array('page_name' ...