![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
笔记
易辰不呆
这个作者很懒,什么都没留下…
展开
-
Vue_14:列表过滤
<body> <div> <h2>人员列表</h2> <input type="text" placeholder="请输入名字" v-model="keyWord"> <url> <li v-for="(p,index) in person" :key="index"> {{p.name}}-{{p.age}}.原创 2021-10-23 17:51:04 · 98 阅读 · 0 评论 -
Vue_12:列表渲染
<body> <div id="root"> <h2>人员列表(遍历数组)</h2> <ul> <li v-for="(p,index) in person" :key="p.id"> {{p.name}}-{{p.age}} </li> </ul> </div> .原创 2021-10-23 16:47:19 · 83 阅读 · 0 评论 -
Vue_11:条件渲染
条件渲染: 1.v-if: 写法: (1)v-if="表达式" (2)v-else-if="表达式" (3)v-else="表达式" 适用于:切换频率较低的场景 特点:不展示的dom元素直接移除 注意:v-if可以和v-elae-if,v-else一起使用,但要求结构不能被打断 2.v-show 写法:v-show="表达式" 适用于:切换频率较高的场景 特点:不展示的dom元素未被移除,仅仅是使用样式隐藏掉 3.备注:使用v-if时,元素可能无法获取到,而使用v-show一定可以获原创 2021-10-23 16:25:39 · 74 阅读 · 0 评论 -
Vue_9:监视属性
<body> <!--天气案例--> <div id="root"> <h2>今天天气很{{Info}}</h2> <button @click="changeweather">改变天气</button> </div> </body> <script> const vm = new Vue({ el:'#root', .原创 2021-10-22 19:31:42 · 55 阅读 · 0 评论 -
Vue_8:计算属性
<body> <!--名字案例_插值语法实现--> <div id="root"> 姓:<input type="text" v-model="firstName"><br/> 名:<input type="text" v-model="lastName"><br/> 姓名:<span>{{firstName.slice(0,3)}} - {{la.原创 2021-10-22 16:25:32 · 55 阅读 · 0 评论 -
Vue_7:事件处理
事件 <body> <!-- 事件的基本使用: 1.使用v-on:xxx或@xxx绑定事件,其中xxx是事件名 2.事件的回调需要配置在methods对象中,最终会在vm上 3.methods中配置的函数,不要用箭头函数,否则this就不是vm了 4.methods中配置的函数,都是被Vue所管理的函数,this的指向是vm或组件对象实例 5.原创 2021-10-22 14:27:53 · 99 阅读 · 0 评论 -
Vue_6:数据代理
回顾Object.defineProperty方法 <body> <script type="text/javascript"> let number=18 let person = { name:'张三', sex:'男', age:18 } object.defineProperty(person,'age.原创 2021-10-22 11:49:21 · 54 阅读 · 0 评论 -
Vue_4:el和data的两种写法
<div id="root">你好{{data}}</div> <script type="text/javascript"> const v = new Vue({ //el='#root',第一种写法 //data的第一种写法:对象式 /*data:{ name:'123' } */ //data的第二种写法:函数式(学习组件时必须使用) /*data:funct.原创 2021-10-22 10:36:11 · 110 阅读 · 0 评论 -
Vue_3:数据绑定
<!-- Vue中有两种数据绑定的方式: 1.单向绑定(v-bind):数据只能从data流向页面。 2.双向数据绑定(v-model):数据不仅能从data流向页面。还可以从页面流向data。 备注: 1.双向绑定一般都是应用在表单类元素上(如:input,select等) 2.v-model:value可以简写为 v-model,因为v-model默认收集的就是value值 --> <!--准备好.原创 2021-10-22 10:19:21 · 970 阅读 · 0 评论