关键词：
【Vue2.0学习】— 列表过滤（四十）
数据监视实现：
<div id="root">
<h2>人员列表</h2>
<input type="text" placeholder="请输入名字" v-model="keyWord">
<ul>
<li v-for="(p,index) of filPersons" :key="index">
p.name-p.age-p.sex</li>
</ul>
</div>
<script>
const vm = new Vue(
el: '#root',
data:
keyWord: '',
persons: [
id: '001',
name: '马冬梅',
age: 20,
sex: '女'
,
id: '002',
name: '周冬雨',
age: 22,
sex: '女'
,
id: '003',
name: '周杰伦',
age: 18,
sex: '男'
,
id: '004',
name: ' 任嘉伦',
age: 29,
sex: '男'
],
filPersons: []
,
watch:
//简写形式
// keyWord(val)
// //filter不更改原数组，它是返回一个新的数组
// this.persons = this.persons.filter((p) =>
// return p.name.indexOf(val) !== -1
// )
//
//
keyWord:
immediate: true,
deep: true,
handler(val)
this.filPersons = this.persons.filter((p) =>
return p.name.indexOf(val) !== -1
)
)
</script>
计算属性实现：
<div id="root">
<h2>人员列表</h2>
<input type="text" placeholder="请输入名字" v-model="keyWord">
<ul>
<li v-for="(p,index) of filPersons" :key="index">
p.name-p.age-p.sex</li>
</ul>
</div>
<script>
const vm = new Vue(
el: '#root',
data:
keyWord: '',
persons: [
id: '001',
name: '马冬梅',
age: 20,
sex: '女'
,
id: '002',
name: '周冬雨',
age: 22,
sex: '女'
,
id: '003',
name: '周杰伦',
age: 18,
sex: '男'
,
id: '004',
name: ' 任嘉伦',
age: 29,
sex: '男'
]
,
// 使用 computed实现
computed:
filPersons()
return this.persons.filter((p) =>
return p.name.indexOf(this.keyWord) !== -1
)
)
</script>
vue2.0学习—列表排序（四十一）(代码片段)
【Vue2.0学习】—列表排序（四十一）<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content=&# 查看详情
vue2.0学习—收集表单数据（四十三）(代码片段)
【Vue2.0学习】—收集表单数据（四十三）v-model的三个修饰符：lazy：失去焦点再收集数据number:输入字符串转为有效的数字trim:输入首尾空格过滤<body><divid="root"><form@submit.prevent="demo" 查看详情
vue2.0学习—vue监视数据的原理（四十二）(代码片段)
【Vue2.0学习】—Vue监视数据的原理（四十二）<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content& 查看详情
vue2.0学习—自定义指令（四十九）(代码片段)
【Vue2.0学习】—自定义指令（四十九）需求：需求1:定义一个v-big指令，和v-text功能相似，但会把绑定的数值放大10倍需求2:定义一个v-fbind指令，和v-bind功能相似，但可以让其绑定的input元素默认获取焦... 查看详情
vue2.0学习—v-pre指令（四十八）(代码片段)
【Vue2.0学习】—v-pre指令（四十八）v-pre指令跳过其所在节点的编译过程可利用它跳过，没有使用指令语法，没有使用插值语法的节点，会加快编译<divid="root"><h2v-pre>Vue其实很简单</h2><h2... 查看详情
vue2.0学习—v-text指令（四十五）(代码片段)
【Vue2.0学习】—v-text指令（四十五）v-text指令：作用：向其所在的节点中渲染文本内容与插值语法的区别：v-text会替换掉节点中的内容，XX不会<divid="root"><h2>你好，name</h2><h2v-tex 查看详情
vue2.0学习—v-html指令（四十六）(代码片段)
【Vue2.0学习】—v-html指令（四十六）知识储备：cookie简略图示v-html指令：作用：向指定节点中渲染包含html结构中的内容与插值语法的区别：v-html会替换掉节点中所有的内容XX不会v-html可以识别html结构严重... 查看详情
vue2.0学习—v-cloak指令（四十七）(代码片段)
【Vue2.0学习】—v-cloak指令（四十七）v-cloak指令：本质是一个特殊的属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性使用css配合v-cloak可以解决网速慢时页面展示出XXX的问题本小结知识点补充属性选择器&... 查看详情
salesforce零基础学习（四十四）实现checkbox列表简单过滤功能
现在做的项目代码是原来其他公司做的，要在原来基础上业务进行适当调整加上一些CR，其中有一个需要调整的需求如下：原来使用apex:selectCheckboxes封装了一个checkbox列表，因为数据太多导致显示起来比较丑，用户希望改进一下UI... 查看详情
vue2.0学习—条件渲染（三十九）(代码片段)
【Vue2.0学习】—条件渲染（三十九）一、v-for指令1、用于展示数据的列表2、语法：v-for="(item,index)"inXXX:key="yyyy"3、可遍历数组、对象、字符串、指定次数<divid="root"><h2>人员列表</h2... 查看详情
vue2.0—过滤器(代码片段)
【Vue2.0】—过滤器（七）<body><divid="root"><h2>显示格式化后的时间</h2><!--计算属性实现--><h2>现在是fmtTime</h2><!--methods实现--><h2>现在是getFmt 查看详情
尚硅谷vue系列教程学习笔记(代码片段)
尚硅谷Vue系列教程学习笔记（4）参考课程：《尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通》参考链接：https://www.bilibili.com/video/BV1Zy4y1K7SH?vd_source=4f4d3466cdc2c5a2539504632c862ce7笔记上传说明：上述课程中共有... 查看详情
vue2.0学习—生命周期（五十）(代码片段)
【Vue2.0学习】—生命周期（五十）Vue生命周期原理图<divid="root"><h2:style="opacity">欢迎来到王者世界</h2><button@click="stop">点我停止</button></d 查看详情
vue2.0学习—键盘事件（三十三）(代码片段)
【Vue2.0学习】—键盘事件（三十三）<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content=&# 查看详情
vue2.0笔记——模板与自定义过滤器(代码片段)
模板语法让我们回到最开始<divid="app"><h1>message</h1></div><script>varvm=newVue(el:‘#app‘,data:message:‘HelloWorld‘)</script>这是一个HelloWorld，简单的通过模板输出。我们称之为数据绑定，而最常见的就是“ 查看详情
vue2.0学习—object.defineproperty（三十）(代码片段)
【Vue2.0学习】—Object.defineProperty（三十）<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible 查看详情
vue2.0学习-内部指令(代码片段)
vue2.0学习(一)-内部指令GitHub源码https://github.com/sunnyguyan/VueDemo1.v-ifv-elsev-showv-if:是vue的一个内部指令,指令用在我们的html中v-if用来判断是否加载html的DOM，比如我们模拟一个用户登录状态，在用户登录后现实用户名称<divv-if=‘isLog... 查看详情
vue2.0学习-实例和内置组件(代码片段)
vue2.0学习(四)-实例和内置组件1.实例入门-实例属性一、Vue和Jquery.js一起使用下载可以去官网进行下载，我这里使用的版本是3.1.1，下载好后在需要的页面引入就可以了。当然你还有很多其它的方法引入jquery，只要可以顺利引入就... 查看详情