学习vue.js条件渲染永利电子游戏网站:

2019-08-24 作者:计算机教程   |   浏览(138)

本文已被整理到了《Vue.js前端组件学习教程》,欢迎大家学习阅读。

{{book.price | currency}} 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

页码列表的渲染使用v-for即可,参照bootstrap的页码html,不难写出:

html:

这就很简单了,将页码下拉框改造一下即可,不难写出:

您可能感兴趣的文章:

var vm = new Vue({ 
 el:'#content', 
 data: { 
  book_list: [ 
   {id:1, name:"标准日本语", type: "文化", price:19.00, time: 1492502043}, 
   {id:2, name:"微观经济学", type: "经济", price:29.00, time: 1492502143}, 
   {id:3, name:"大数据时代", type: "经济", price:39.00, time: 1492502243}, 
   {id:4, name:"TCP/IP协议详解", type: "科技", price:49.00, time: 1492502343}, 
   {id:5, name:"大学英语", type: "文化", price:59.00, time: 1492502443}, 
  ] 
 } 
}); 

本文实例为大家分享了vue.js中条件渲染的练习代码,供大家参考,具体内容如下

也就是过滤器,但在Vue2.0中,已废弃默认过滤器了,这意味着我们需要自定义过滤器,并且注册到Vue对象中去。
不难写出currencydate过滤器为:

js:

分页展示

 

使用v-for指令来渲染,将tr标签改写成:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>条件渲染</title>
</head>
<body>
<!-- v-if 作为判断条件 如果满足则展示它所附着的元素的内容-->
<!-- 除了v-if 还可以配合使用v-else--> 
<div id="app-1" v-if="Math.random()>0.5">
{{message}}
</div>
<div id="app-2" v-else>
{{message2}}
</div>

<!-- v-if使用时必须加在一个元素上 如果想要根据一个判定条件展示多个数据的话 要用到template-->
<!-- template相当于一个包装元素 不显示在网页上 -->
<template v-if="ok">
<h1>这是个标题</h1>
<p>lowrie</p>
</template>
<!-- v-else还可以跟在v-show后-->
<!-- 注意:v-else必须紧跟在v-show 或者v-if后 否则浏览器不能识别 -->
<!-- v-show和v-if的区别 v-show所附着的元素会一直存在于Dom层中 是简单的切换元素的CSS属性display -->
<!-- 注意:v-show不支持template -->
<div v-show="ok">
我是v-show
</div>
<!-- v-if v-show对比:
v-if是真实的条件渲染,因为它会确保条件块在切换当中适当地销毁与重建条件块内的事件监听器和子组件。
v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做——在条件第一次变为真时才开始局部编译(编译会被缓存起来)。
相比之下, v-show 简单得多——元素始终被编译并保留,只是简单地基于 CSS 切换。
一般来说, v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此,如果需要频繁切换使用 v-show 较好,如果在运行时条件不大可能改变则使用 v-if 较好。 -->

<script src="js/vue.js"></script>
<script src="js/vuetext.js"></script>
</body>
</html>

值得注意的是:过滤器不能和v-text指令配合使用,下述代码无法生效:

var app1=new Vue({
el:'#app-1',
data:{
message:'我的随机数大于0.5'
}
});
var app2=new Vue({
el:'#app-2',
data:{
message2:'我的随机数小于0.5'
}
});
<tr v-for="(book, key) in book_list"> 
 <td v-text="key   1"></td> 
 <td v-text="book.name"></td> 
 <td v-text="book.type"></td> 
 <td v-text="book.price"></td> 
 <td v-text="book.time"></td> 
 <td> 
  <button class="btn btn-info btn-xs"> 
   <i class="fa fa-pencil"></i> 
   修改 
  </button> 
  <button class="btn btn-danger btn-xs"> 
   <i class="fa fa-trash"></i> 
   删除 
  </button> 
 </td> 
</tr> 
<ul class="pagination"> 
 <li :class="{disabled:page_num<=1}" @click="prePage()"> 
  <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><i>«</i></a></li> 
 <li v-for="n in total_page" :class="{active:page_num==n}"> 
  <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" v-text="n" @click="page_num=n"></a></li> 
 <li :class="{disabled:page_num >= total_page}" @click="nextPage()"> 
  <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><i>»</i></a> 
 </li> 
</ul> 

:value是绑定value的值
v-model会使得select的value与page_size绑定,这个绑定双向的

上篇使用Vue.js制作仿Metronic高级表格(一)静态设计介绍了需求、原型设计以及静态页面实现,这篇讲解如何使用Vue渲染数据,实现动态展示。

要渲染页码列表,必须先得到总页数,因为后期可能会增加关键字过滤,所以我们使用计算属性来得到总页数:
不足一页也要当一页来显示

值得注意的是:

@click是绑定click事件,可以是函数执行,也可是是js代码执行
:class是绑定class属性,格式是"样式名称: 条件",当条件为true时,才设置这个样式。
此处为何不用v-show?因为效果太难看了

<td v-text="book.price | currency"></td> 
<td v-text="book.time | date"></td> 
<td>{{book.price | currency}}</td> 
<td>{{book.time | date}}</td> 

您可能感兴趣的文章:

本次效果图:

computed : { 
 page_book_list: function() { 
  return this.pageData(this.book_list, this.page_size, this.page_num); 
 } 
} 

本文由永利电子游戏网站发布于计算机教程,转载请注明出处:学习vue.js条件渲染永利电子游戏网站:

关键词: