模板语法https://juejin.im/user/580327ee0e3dd900570cf3ab
1.文本
数据绑定最常见的形式就是使用 “Mustache”
语法(双大括号)的文本插值:
Mustache 标签将会被替代为对应数据对象上 world
属性的值 ,而且一直会监听world的值,一但改变会跟着改变
应用场景 : 可以说处处都用的到
<template>
<div>
<p>hello {{world}}</p>
<p v-text="'hello ' + world"></p>
<p>{{`hello ${world}`}}</p>
<p v-text="`hello ${world}`"></p>
<button @click="world='ziksang'">改变wrold值</button>
</div>
</template>
<script>
export default {
data () {
return {
world : "world"
}
}
}
</script>
以上用了四种写法
第一种“Mustache”
语法(双大括号)写法
第二种 用v-text的指今写法
第三种和第四是对es6写法的拓展写法,称模板字符串
2.v-once
通过指令我们可以对文本值进行一次性赋值操作,只进行第一次的数据渲染,如果再次改变值,文本值也不会改变
应用场景 : 一般是用在组件树中传递时,导致组件数据一层一层传递时,变改了不需要改变的场景,用v-once可以避免在组件数中只需用一次性赋值操作
<template>
<div>
<p v-once>hello {{world}}</p>
<button @click="world='ziksang'">改变wrold值</button>
</div>
</template>
<script>
export default {
data () {
return {
world : "world"
}
}
}
</script>
我们再次点击button时,我们会发现没有任何改变,值行了所谓的一次性赋值
3.纯html
我们在解析的不是文件而是一个html
格式的时候放在v-text中或者{{}}就会被当作一个文本解析,所以我们此时要用v-html指令进行解析,在1.0中支持{{{}}}这种格式,为了防止xss功击,去除了这个功能
常用场景 : 当我们在跟前后台对接口数据时,后台会返回一个html格式,一般是后台操作界面编译的样式文本,此时我们就要用v-html来进行解析
<template>
<div>
<p v-html='html'></p>
</div>
</template>
<script>
export default {
data () {
return {
html : `<span style='color : red;'>显示红色的字你就解析成功了</span>`
}
}
}
</script>
此时在界面我们就能看到显示红色的字你就解析成功了
这几个字样,就是被成功解析了
4.属性
在vue中属性这个东西很关健,在组件与组件中数据传递时会很有用,但是对于属性的解析我们不能用{{}}“Mustache”
语法(双大括号)写法,我们同时还是要用指令去解析,那就是v-bind:*,同时我们可以简写用v-bind
语法糖 :
即可
如果我们先不考虑组件传递,我们就是考虑简单的给元素加属性
应用场景 在组件中传递时需要用,其它元素上的绑定属性都需要这个功能
<template>
<div>
<a :href='href'>href</a>
<p :id='id'>id</p>
<img :src="src" alt="图片">
<button :disabled = 'disabled'>按钮</button>
</div>
</template>
<script>
export default {
data () {
return {
id : 2,
href : 'http://www.baidu.com',
src : 'https://cn.vuejs.org/images/logo.png',
disabled : true
}
}
}
</script>
我们在属性中支持number
string
boolean
类型,以上显示能在界面中看出都能正常进行和原本属性所预期的,不用:
来绑定的属性可以直接属性赋值,如果一定要通过data数据选项
中返回的值一定要加 :
5.使用javascript表达式
应用场景 :
在业务场景中一些方法判断或者简单的过滤,那我们可以用javascript表达式,能让代码更简洁,更清晰,比方说用一个三元表达式。。等等
<template>
<div>
<div id="method1">
<p>{{ count < 0 ? '+' : '-'}} {{count + 1}}</p>
<button @click='count ++'>增加</button>
<button @click='count --'>减少</button>
</div>
<div id="method2">
<input type="text" v-model='message'>
<h1>{{ message.split('').reverse().join('') }}</h1>
</div>
</div>
</template>
<script>
export default {
data () {
return {
count : 0,
message : ""
}
}
}
</script>
在id:method1 里,我们做了一个对count进行+1,对count进行三元表达式来进行判断做出不同的显示
在id:method2 里,我进行了v-model指令和h1里message进行了双向绑定,随着message的改变h1里的值随着表达式的的改变而改变
注意示项,在官方提出来的这几种是不可行的
这是语句,不是表达式
{{ var a = 1 }}
流控制也不会生效,请使用三元表达式
{{ if (ok) { return message } }}
6.修饰赋
修饰符(Modifiers)是以半角句号 . 指明的特殊后缀,用于指出一个指令应该以特殊方式绑定。
应用场景 :
对于一些特殊的指令操作时需要,比方说对组件加事件,组织元素的默认行为,组织冒泡。。等等一系列,官方文档有详细解说每一个修饰赋
的具体用途
再次提示主逻辑代码都是写在.App.vue中,所有其它的组件代码都是写在componentes里
首我们先对components文件夹中创建一个myButton组件
<template>
<button>按钮</button>
</template>
<script>
export default {
}
</script>
再在app.vue中写入
<template>
<div>
<my-button @click.native="buttonClick"></my-button>
</div>
</template>
<script>
import myButton from './components/myButton.vue'
export default {
components : {
myButton
},
methods : {
buttonClick () {
alert("原生点击")
}
}
}
</script>
我们可以尝试一下如果我们去掉.native
的话你会发现组件根本出alert(原生点击)的弹框,这是为什么呢,正常的情况在一个单个组件内部自己使用v-on的事件,ok都不会有问题,如果在一个组件上定义一个指令事件,必须要用.native,这里大家一定要注意
####推荐很实用的demo
我们用jquery的时候经常会遇到这种场景,当我们一个layer层弹出来的时候,内部是一个超过整个屏幕长度的滚动,当我们滑动layer的时候会导致里面的滚动也会一起滚动起来,这个是一件很操蛋的事,在网上也有着很多相关解决的办法,vue可以通过修饰符来解决这个问题
index.html文件中加一个视口度适配,更好的来查看效果
<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>
app.vue文件中
<template>
<div>
<ul>
<li v-for="item in list">
<h1>{{item}}</h1>
</li>
</ul>
<div @touchmove.prevent class="layer"></div>
</div>
</template>
<script>
import myButton from './components/myButton.vue'
export default {
data () {
return {
list : [1,2,3,4,5,6,7,8,9,10]
}
}
}
</script>
<style>
body,html {width:100%;height:100%}
h1{margin-top:10rem;}
.layer{width:100%;height:100%;position:fixed;top:0;left:0;z-index:99;background:rgba(0,0,0,.5)}
</style>
此时我们打开chrome调试工具的时候我们会发当我们滑动layer层的,里面的滚动不会再滚动了,我们再试着把.prevent给去掉,会发现滚动再次出现,这个原理就是event.preventDefault来阻止默认事件事执行的。
实现原理,我们对layer层把它的touchmove滑动事件给干掉了,就不会触发滚动区域的滑动事件,个人认为这个场景每个项目都会用的到
再做一个表单的简单示例
<template>
<div>
<input type="text" v-model.trim="content">
<input type="text" v-model = 'content'>
</div>
</template>
<script>
export default {
data () {
return {
content : ""
}
}
}
</script>
这个我们能发现当加入.trim的修饰符的时候给到第二个input的时候都是去掉前后空白符的,这个功能也就是去掉前后空白符,这也是很常用的场景,一些表单当用户输入的时候,有些用户会打出一个前后空白符,有一次我保用户数据给数据库,操作的时候还代码还好好的,突然一个空白字符引发的一场血案,要注意细节点
6. 过滤器
Vue.js
允许你自定义过滤器,可被用作一些常见的文本格式化。过滤器可以用在两个地方:mustache
插值和 v-bind
表达式。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符指示:
其实本质上过滤器也就是一个或多个表达式,但是有极条件控制的表达式或者长业务逻辑的表达式写在mustache
不够清楚,明了
在v-bind中也就是2.10的时候才支持这个功能,这个大家要对这个版本有一定的了解,正确的使用
应用场景 :
我说说我遇到过的应用场景,再把我应用的场景再加深一点逻辑
1.首先我们从后台拿到10个用户的手机,但是要把前7位掩码,做成*,然判断如果手机尾数是偶数的话,我们就显示已中奖,不是的话显示谢谢参与
<template>
<div>
<p v-for='tel in telephone'>{{tel | newtel}}</p>
</div>
</template>
<script>
export default {
data () {
return {
telephone : [
10000000000,
10000000001,
10000000002,
10000000003,
10000000004,
10000000005,
10000000006,
10000000007,
10000000008,
10000000009,
10000000000,
]
}
},
filters : {
newtel (value) {
if(!value) return ''
value = value.toString().substr(7,4)
value = '*'.repeat(7)+value
let endMember = value.substr(-1,1)
if(endMember % 2){
value = value+'中奖'
}else{
value = value+'谢谢参与'
}
return value
}
}
}
</script>
代码会析,在filters选项里有个newtel的函数,value则是函数中固定的一个参数,代码过滤前的值,但最后在管道符里我们不用把这个固定的参数写在调用里面,如果没有,则返回"",我们再取后四位,在前7位拼接7个*,这里我用到了es6新特性,repeat这个方法,原本我想用padStart可惜是es7的新性,babel不支持,再截取尾数,如果尾数%2是偶数则再后面加一个中奖,否则谢谢参与,最后把这个value的最终值返回出去
7.结合过滤器参数与v-bind过滤
以上过滤器原理也跟大家说了,我们进一步深化一下,如果两都结合使用
应用场景
当后台传给很多链接的地址的时候,每个链接要带上不同的参数,比如https//www.baidu.com?user=ziksang&age=20,针对于这种场景我给大家实战一下
<template>
<div>
<a v-for='(url,index) in urlList' :href='url.url | getquery(url.name,url.age)'>{{url.url}}</a>
</div>
</template>
<script>
export default {
data () {
return {
urlList : [
{url : 'http://www.baidu.com',name :'ziksang',age : 20},
{url : 'http://www.google.com',name :'ziksang2',age : 30}
]
}
},
filters : {
getquery (value,name,age) {
if(!value) return ""
return `${value}?name=${name}&age=${age}`
}
}
}
</script>
在v-bind管道符中的getquery(第一个参,第二个参)
第一个参就是传给fitler里getquery里的第二个参数,就是name
第二个参就是传给fitler里getquery里的第三个参数,就是age
因为第一个参数是默认的
这里我大量用了v-for来进行循环,如果有看不懂的话,等讲到第基础二或者三的时候再回头看看这里的v-for用法你就一目了然了
8.缩写
<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>
<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>
这没有什么可以多讲的,就是一个语法糖,方便大家书写
写到这里,只是简单的讲一下模板语法,但是我个人认为,还展拓了很多其它知识点,刚好如果那些知识点你不会的,可以去查一查做一个预热,在接下来几天中,我们把上出第二篇基础(v-for 列表渲染)
v-for 列表渲染
- v-for array 数组渲染
我们用v-for
指令根据一组数组的选项列表进行渲染。 v-for
指令需要以item in items
形式的特殊语法, items
是源数据数组并且 item
是数组元素迭代的别名。
应用场景:
通常情况下,进入一个活动要展示出所有参加活动的人员,里面有姓名,年龄,报名时间等等,就先举这三个列子,那后台肯定会返回一个arraylist
数组集合,集合中每个元素肯定是一个对象,那我们如何去把这个数组集合高效率,合理的渲染到页面上,,再拿到用户id
去到下一个页面查询memberDetail
祥情,用过jq的同学肯定知识很烦繁,一般肯定是用arttemplate
这种模板引擎
<template>
<div>
<ul>
<li v-for="(item,index) in memberList" @click="memberDetail(index)">
<span>{{item.custName}}</span>
<span>{{item.age}}</span>
<span>{{item.joinTime}}</span>
</li>
</ul>
</div>
</template>
<script>
export default {
created () {
//就当看作是ajax在初始化进入的时候从后台获取的用户列表数据
this.memberList = [
{custName : "ziksang1",age:20,joinTime : "2014-01-02",custId:1},
{custName : "ziksang2",age:21,joinTime : "2014-01-03",custId:2},
{custName : "ziksang3",age:22,joinTime : "2014-01-04",custId:3},
{custName : "ziksang4",age:23,joinTime : "2014-01-05",custId:4},
]
},
data () {
return {
memberList : []
}
},
methods : {
memberDetail (index) {
sessionStorage.custId = this.memberList[index].custId
}
}
}
</script>
我觉得这个demo太常用了,逐行分析
1.如果在template模板
里面用到了数据必须先在data选项里先声明赋值
,我们先给memberList
给予一个[]数组
2.在created函数
里我们就当作模拟从后台拿到的数据,然后赋值给data选项里
的memberList
,此时memberList
就有后台拿到的值了
3.(item,index) in memberList
是vue自己封装的一个语法结构
一.item
代表集合中的每一个元素,此时每一个元素就是一个对象
二.index
代表集合每一个元素的下标
三.memberList
是所要循环的数组
4.为什么我们要把 (item,index) in memberList
放在每一个循环dom上,那就是li标签 只有在li循环体节点上和循环体所有子节点上拿到item这个对象里面的所有属性
5.@click="memberDetail(index)"
这里用了一个点击方法,我们把index作为了方法的参数
,目的是什么,这个index代表每一个循环出来dom的下标,通过点击,我们可以拿到对应的用户id可以说拿到每一个用户的任意值,然后在methods我们进行操作,我们可以能过sessonStorage
来存放,用来过度到下一个用户祥情页,来获取所有用户详情,我们可以打开谷歌浏览器,当我们用鼠标点击的时候,可以发现sessionStorage里的变化
整个流程是无论是开发任意中型项目必备的
2.template v-for
如同 v-if 模板,你也可以用带有 v-for 的 <template>
标签来渲染多个元素块,循环块区域
应用场景 :
当我们循环渲染时,我们如果有多个欠套不合理的关系下,一般情况下肯定是在最外层套一个div元素,这个我认为显的不是很清楚,我们用template来代替渲染,不但能省去很dom节点,而且也能解决欠套不合理的情况
<template>
<div>
<template v-for="item in list">
<p>{{item.content}}</p>
<img :src="item.img" alt="">
<p class="divider"></p>
</template>
</div>
</template>
<script>
export default {
data () {
return {
list : [
{content : 'ziksang',img :'https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=1301074775,1382810875&fm=80&w=179&h=119&img.JPEG'},
{content : 'ziksang2',img :'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=1312092207,1376369244&fm=80&w=179&h=119&img.JPEG'}
]
}
}
}
</script>
<style>
body,html{
width:100%;
height:100%
}
.divider{
width:100%;
height:1px;
background:black;
}
</style>
如果我们不想多创节点,又不想让p元素做为根节点,我们就可以用template来做渲染,在chorme开发者工具上,也能证实,最外层的的template会自动消失,不会创造出多余的节点。
3. v-for Object 对象渲染
你也可以用 v-for 通过一个对象的属性来迭代。
应用场景 :
就像第一个列子如果到了详情页,我们要展示一个用户详情,如果后端都给你排好序了,如何正确的方便展示出来,用最快,最便捷的方法那就是v-for 迭代对象,一般情况下展示一个用户详情,后台肯定返回一个用户对象给你
<template>
<table>
<template>
<tr>
<td v-for="(value,key,index) in memberDetail">{{key}}</td>
</tr>
<tr>
<td v-for="(value,key,index) in memberDetail">{{value}}</td>
</tr>
</template>
</table>
</template>
<script>
export default {
created () {
//比方说我们这里拿到前面的custId传给后台拿到用户数据
this.memberDetail = {
name : 'ziksang',
age : 20,
address : "xxx省xxxx市",
tel : "15921898427"
}
},
data () {
return {
memberDetail : {}
}
}
}
</script>
<style>
body,html{
width:100%;
height:100%
}
.divider{
width:100%;
height:1px;
background:black;
}
</style>
1.(value,key) in memberDetail
value
代表属性值
key
代表属性,
index
代表每个dom节点的下标索引
两者都是一一对应的,通过第一个例子讲解,我相信这个例子很简单了
4. v-for 整数迭代
这个看看demo就可以了,我几乎没用过
<div>
<span v-for="n in 10">{{ n }}</span>
</div>
4. v-for 和 组件
在自定义组件里,你可以像任何普通元素一样用 v-for 。
应用场景 :
比方拿掘金来说,每个用户展现的文章列表中,每个用户的文章可以做成一个统一组件,通过父组件来进行数据的传递,循环出所有人的文章,就形成了文章列表,而且可以在热门,最新,或者专栏里面复用,只需要通过数据传递,是一种相当好的模式
在components文件夹里创一个myArticle文件
<template>
<div>
<p>{{artList.name}}</p>
<p>{{artList.startTime}}</p>
<p>{{artList.content}}</p>
<p>{{artList.good}}</p>
</div>
</template>
<script>
export default {
props : ['artList']
}
</script>
用props选项
来接收父组件传入的数据,渲染组件
App.vue文件
<template>
<div>
<my-article v-for='item in artList' :art-list='item'></my-article>
</div>
</template>
<script>
import myArticle from "./components/myArticle.vue"
export default {
components : {
myArticle
},
created () {
//比方说我们是从后台拿到的文章集合
this.artList = [
{name : 'ziksang1' , startTime : '1小时前' , content:'aaaaaaaaa',good : 1},
{name : 'ziksang2' , startTime : '2小时前' , content:'bbbbbbbbb',good : 2},
{name : 'ziksang3' , startTime : '3小时前' , content:'ccccccccc',good : 3},
{name : 'ziksang4' , startTime : '4小时前' , content:'ddddddddd',good : 4}
]
},
data () {
return {
artList : []
}
}
}
</script>
这个需要逐行分析
1.首先们引入组件
2.v-for
来循环组件
3.把每个文章的数据用 :art-list='item'传给myArticle组件
如我们进行下拉加载和上拉刷新的话,只要把取到的数据再次从新赋给子组件就可以了,而且我们还可以在各个页面来重复复用这个组件,减少开发工作量
4. 数组更新检测
1.数组变异
说的通俗一点,实是就是我们用Array.prototype
里提供的原型方法里我们能直接改掉data选项里的数据,触发了视图更新,那就是叫数组变异方法
官方给大家列了只有那些方法能触发视图更新
1.push()
2.pop()
3.shift()
4.unshift()
5.splice()
6.sort()
7.reverse()
应用场景,我们比方说我们是绝境的后台控制者,我们无聊看那个文章不爽,我们对文章进行操作,这个只是我瞎说玩玩的场景,就是用情景去模拟用法的场景
App.vue文件
<template>
<div>
<my-article v-for='item in artList' :art-list='item'></my-article>
<button @click='push'>添加文章</button>
<button @click='pop'>尾部去除一篇文章</button>
<button @click='unshift'>在头部加入一条数据</button>
<button @click='shift'>在头部去除一条数据</button>
<button @click='reverse'>把所有数据进行反转</button>
<button @click='clear'>清除所有数据</button>
</div>
</template>
<script>
import myArticle from "./components/myArticle.vue"
export default {
components : {
myArticle
},
created () {
//比方说我们这里拿到前面的custId传给后台拿到用户数据
this.artList = [
{name : 'ziksang1' , startTime : '1小时前' , content:'aaaaaaaaa',good : 1},
{name : 'ziksang2' , startTime : '2小时前' , content:'bbbbbbbbb',good : 2},
{name : 'ziksang3' , startTime : '3小时前' , content:'ccccccccc',good : 3},
{name : 'ziksang4' , startTime : '4小时前' , content:'ddddddddd',good : 4}
]
},
data () {
return {
artList : []
}
},
methods : {
push () {
this.artList.push({
name : 'ziksang5' ,
startTime : '5小时前' ,
content:'eeeeeeeeee',
good : 5})
},
pop () {
this.artList.pop()
},
shift () {
this.artList.shift()
},
unshift () {
this.artList.unshift({
name : 'ziksang3',
age : 40
})
},
reverse () {
this.artList.reverse()
},
clear () {
this.artList = []
}
}
}
</script>
我们发现我们点这些按钮的时候,myArticle的视图同时跟着改变,这就是我们需要的效果就是变异方法根本的意思,能通过Array.prototype
里的原形方法改变data选项artList数组触发视图改变的方法就是变异方法
2.数组非变异
no-mutation methods(非变异方法),不能通过Array.prototype里的原形方法改变data选项artList数组触发视图改变的方法就是非变异方法,其余的方法都是操作后,形成一个返回值,所有操作只是返回了一个新数组,而不会触发视图更新
有1.filter(), 2.concat(), 3.slice(), 4.map()
<template>
<div>
<ul>
<li v-for = " (item,index) in list" v-text='`${item} - ${index} `'></li>
</ul>
<button @click="filter">数组进行取余过滤</button>
<button @click="concat">数组进行合并</button>
<button @click="map">数组印射</button>
<button @click="slice">返回截取后的数组</button>
</div>
</template>
<script>
export default {
data () {
return {
list : [ 1, 2, 3, 4],
list2 : [ 7, 8, 9, 0 ]
}
},
methods : {
filter () {
this.list = this.list.filter((item)=>{
return item % 2
})
},
concat () {
//以上两种方法都可以
//1.第一种是es6的解构操作符
//2.第二种是传统的数组合并
this.list = [...this.list,...this.list2]
//this.list = this.list.concat(this.list2)
},
map () {
this.list = this.list.map(item =>{
return `${item} map`
})
},
slice () {
this.list = this.list.slice(2)
}
}
}
</script>
那我们最终目的还是要通过方法来改变视图更新,怎么办,很简单,只要把形成的返回值再从新赋值给data选项里的数组就可以了,看api文档说起来很高深的样子,但根本原理就是Array.prototye
原型上方法导的鬼,我相信大家肯定很清楚了,上面我还在代码中对...解构新特性给大家演示了一个例子
4. 注意示项
官方提示:
由于 JavaScript 的限制, Vue 不能检测以下变动的数组:
当你利用索引直接设置一个项时,例如:vm.items[indexOfItem] = newValue
当你修改数组的长度时,例如:vm.items.length = newLength
在
<template>
<div>
<ul>
<li v-for = " (item,index) in list" v-text='`${item} - ${index} `'></li>
</ul>
<button @click="change3">改变数组第2个值,改成0</button>
<button @click="change4">改变数组第2个值,改成5</button>
</div>
</template>
<script>
import Vue from 'vue'
export default {
data () {
return {
list : [ 1, 2, 3, 4],
list2 : [ 7, 8, 9, 0 ]
}
},
methods : {
//通过下标来改变整个数组里的值也是行不通的
changeList () {
this.list[2] = 3
},
//通过数组长度改变改个数组里的值是行不通的
changeList2 () {
this.length = 1
},
//第一我们可以通过,vue.set实列方法来改变,但我们要在开头再引一入下vue包
// 1 第一个值代表需要改变的数组
// 2 第二个代表改变那一项
// 3 第三个代表改成什么值
//样式语法 Vue.set(example1.items, indexOfItem, newValue)
change3 () {
Vue.set(this.list,1,0)
},
//通过 Array.prototype.splice 数组原型上的方法来改变整个数组的长度或者内容
//这个方法大家肯定常用,我就不细说了
change4 () {
this.list.splice(1,1,5)
}
}
}
</script>
这里因为操作问题我就在代码中直接写了注释,更加能让大家清楚的了解,如何通过那些方法改变数组的长度,改变下标的某一个元素
5. 显示过滤/排序效果
对于我的理解我就定义他叫副本过滤,在不改动data选项原数组的同时,对新数组进行改变,同时也不创造出多余的数据值,那我们这里就要用到一个基础3所要讲的计算属性
应用场景 :
我在这里做了一个小demo当原数组里面随机改变值的同时,副本基于原数组的创建出一个副本数组跟着过滤的不同而改变
有两个视图:
1.第一个视图,我们点击按纽改变1-10的随机数
2.第二个视图,随着随机数的改变来判断是否为偶数是偶数的则过滤出来
<template>
<div>
<ul>
<li v-for = " (item,index) in list" v-text='`${item} - ${index} `'></li>
</ul>
<ul>
<li v-for = " (item,index) in filter" v-text='`${item} - ${index} `'></li>
</ul>
<button @click="randomList">随机重置数组的值</button>
</div>
</template>
<script>
export default {
data () {
return {
list : [ 1, 2, 3, 4]
}
},
//检测计算 随着原数组用随机数改变的同时,来筛选出不同的过滤结果,筛选结果是原数组的里面为偶数的值拼成一个新数组
//1.我们还可以用methods方法,但是不能一直监控
computed : {
filter () {
return this.list.filter((item)=>{
return item % 2
})
}
},
methods : {
//这里就是随着改变data原数组里的值
randomList () {
this.list = this.list.map(item => {
return item+Math.round(Math.random()*9+1)
})
}
}
}
</script>
随着我们点击按钮的同时,两个视图同时更新,本质上就是在data选项里过滤出一个新数组,同时这个新数组不会影响到data选项里的数组,这个就叫做副本过滤,通过自己的想像可以做出很多不同的demo例子