智享笔记 Vue2
-
图书管理案例-添加图书
<head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .grid { margin: auto; width: 530px; text-align: center; } .grid table { border-top: 1px solid #C2D89A; width: 100%; border-collapse: collapse; } .grid th,td { padding: 10; border: 1px dashed #
-
图书管理案例-列表展示
<head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .grid { margin: auto; width: 500px; text-align: center; } .grid table { width: 100%; border-collapse: collapse; } .grid th,td { padding: 10; border: 1px dashed orange; height: 35px; line-heigh
-
动态响应式数据处理
<body> <div id="app"> <ul> <li v-for='item in list'>{{item}}</li> </ul> <div> <div>{{info.name}}</div> <div>{{info.age}}</div> <div>{{info.gender}}</div> </div> </div> <script type="text/javascript" src="js/
-
变异方法和替换数组
<body> <div id="app"> <div> <span> <input type="text" v-model='fname'> <button @click='add'>添加</button> <button @click='del'>删除</button> <button @click='change'>替换</button> </span> </div> <ul> <li :key='index' v-f
-
实例的生命周期
<body> <div id="app"> <div>{{msg}}</div> <button @click='update'>更新</button> <button @click='destroy'>销毁</button> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> /* Vue实例的生命周期 */ v
-
带参数的过滤器案例
<body> <div id="app"> <div>{{date | format('yyyy-MM-dd hh:mm:ss')}}</div> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> /* 过滤器案例：格式化日期 */ // Vue.filter('format', function(value, arg) { // if(arg == 'yyy