-----聊摄影 谈技术 不老的攻城狮-----
v-cloak v-text v-html和插值表达式的区别与特点
使用插值表达式会有闪烁问题
设置v-cloak类中的display为none来解决闪烁问题
使用插值表达式可以在前后添加内容，v-text会覆盖标签内容
使用v-text没有闪烁问题
使用v-html来添加带有html标签的内容，同时也会覆盖原标签的内容
v-bind用来绑定属性(v-bind:)，v-on用来绑定事件(v-on:click="show")。
v-bind：绑定的属性名称 可简写为：绑定的属性名称。
v-on:绑定的事件名称 可简写为 @绑定的事件名称。
v-bind中引号内容可看做一个js中的表达式，因此可进行连接字符串的操作，可以写其他合法的js表达式。
使用.stop阻止事件的冒泡行为。
使用.prevent阻止事件的默认行为。
使用.self实现只有点击当前元素才会触发事件处理函数。
使用.capture实现捕获触发事件的机制，即从外部事件开始执行。
使用.once实现事件的触发次数为一次。
需要特别注意.stop和.self的区别：.stop是阻止除了自己之外所有的冒泡事件，而.self是控制自己被点击才会触发事件处理函数，阻止自己被冒泡所影响。
<input type="checkbox" name="" id=""> id:{{item.id}} name:{{item.name}} p> 在实现删除列表项的功能时，使用splice(从何开始，删除几个，插入项)方法，因此从何开始(index)需要我们把它揪出来。
第一种方法使用some()函数遍历数组，通过回调函数设置判断条件，当条件成立即索引对应成立时执行删除操作，终止循环。
第二种方法使用findIndex()方法直接获取索引，同样是在回调函数中进行判断，当条件成立(item.id==id)时，拿到索引，使用splice()删除列表项。
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><html><head> <base href=""> <title>送材料格式化title> <script src="js/vue.min.js">script>head><body> <div class="app"> <div class="panel panel-primary"> <div class="panel-heading"> <h2>品牌管理h2> div> <div class="panel-body form-inline"> <label for="">id：<input type="text" class="form-control" v-model="id">label> <label for="">品牌名称：<input type="text" class="form-control" v-model="name">label> <input type="button" value="添加" class="btn btn-primary" @click="add"> <label for="">搜索关键字：<input type="text" class="form-control" v-model="keywords">label> div> div> <table class="table table-bordered table-hover"> <thead> <tr> <th>idth> <th>品牌名称th> <th>添加时间th> <th>操作th> tr> thead> <tbody> <tr v-for="item in search(keywords)" :key="item.id"> <td v-text="item.id">td> <td v-text="item.name">td> <td>{{ item.time | timeFormat}}td> <td><a href="" @click.prevent="del(item.id)">删除a>td> tr> tbody> table> div> <script> var vm = new Vue({ el: ".app", data:{ arr:[ {'id':1,'name':'iPhone','time':new Date()}, {'id':2,'name':'华为','time':new Date()}, {'id':3,'name':'OPPO','time':new Date()} ], //创建一些初始数据与格式 id:'', name:'', keywords:'' //初始化参数keywords为空 }, methods:{ search(keywords){ return this.arr.filter(item=>{ if(item.name.indexOf(keywords)!= -1){ return item }//filter方法来循环数组返回的是一个符合条件的新数组 }) }, add(){ this.arr.push({'id':this.id,'name':this.name,'time':new Date()}); this.id=this.name=''; },//add方法实现列表的输入功能 del(id){ var index=this.arr.findIndex(item => { if(item.id==id) { return true; } }) this.arr.splice(index,1) //findIndex方法查找索引实现列表的删除功能 // this.arr.some((item,i) => { // if (item.id===id) { // this.arr.splice(i,1) // return true; // } // })//some方法查找索引实现列表的删除功能 } }}); script> body>html> 定义一个search(keywords)方法，通过参数keywords绑定搜索框，接收关键字，然后通过循环遍历数组来判断符合条件的列表项，作为返回值渲染到页面中。
数组方法：some((item，i)=>{条件{return ture}}) 当条件成立时终止循环，i为查找到的索引，可通过return ture终止循环
forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。
注意: forEach() 对于空数组是不会执行回调函数的。
filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
注意： filter() 不会对空数组进行检测。
注意： filter() 不会改变原始数组。
findIndex((item)=>{条件函数})查找符合条件的索引
findIndex() 方法返回传入一个测试条件(函数)符合条件的数组第一个元素位置。
findIndex() 方法为数组中的每个元素都调用一次函数执行：
当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置，之后的值不会再调用执行函数。
如果没有符合条件的元素返回 -1
注意: findIndex() 对于空数组，函数是不会执行的。
注意: findIndex() 并没有改变数组的原始值。
通过vue.filter('过滤器名称'，function(参数){过滤方式，返回过滤后值})的方式定义一个全局过滤器。
使用过滤器的方式格式是{{ 要处理的字符 | 过滤器的名称}}
replace(‘替换字符’，‘被替换字符’)方法的使用
<script>var vm= new Vue({ //创建vue实例 el:'.app', data:{ arr:[ {'id':1,'name':'iPhone','time':new Date()}, {'id':2,'name':'华为','time':new Date()}, {'id':3,'name':'OPPO','time':new Date()} ], //创建一些初始数据与格式 id:'', name:'', keywords:'' //初始化参数keywords为空 }, directives:{ focus:{ inserted:function(el) { el.focus() } } },//自定义指令 filters:{ timeFormat:function (dataStr) { var myData=new Date(dataStr) var y=myData.getFullYear() var m=(myData.getMonth() + 1).toString().padStart(2,'0') var d=myData.getDate().toString().padStart(2,'0') var h=myData.getHours().toString().padStart(2,'0') var mm=myData.getMinutes().toString().padStart(2,'0') var s=myData.getSeconds().toString().padStart(2,'0') return `${y}-${m}-${d} ${h}:${mm}:${s}++++++` } }//******创建一个私有过滤器******/ })script>自定义私有过滤器形式：fliters：{过滤器名称：function (){}}
padStart方法在头部填充字符(字符串独有)实例、：时间字符串填充0
padEnd方法在尾部填充字符串
<script> Vue.directive('focus',{ // 在每一个函数中，第一个参数，永远是el，表示被绑定了指令的那个元素， // 这个el参数，是一个原生的js对象，也就是dom bind:function(el,binding){//每当指令绑定到元素上的时候，会立即执行这个bind函数，只执行一次 el.style.color=binding.value },//binding为一个对象，包含一些属性 inserted:function(el){//当元素插入到dom的时候，会执行insert，只执行一次 el.focus() }, updated:function(el){//当vnode更新的时候会执行update，可能触发多次 } }) var vm =new Vue({ el:'#a' })script>
身与JAVA同行 心与Python同梦
怀中却拥抱着佳能5DV入眠
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
