- 博客(7)
- 收藏
- 关注
RSS订阅原创 Vue中数组的响应方式
改变DOM绑定的数据时，DOM会动态的改变值。数组也是一样的 但是对于动态变化数据，有要求，不是任何情况改变数据都会变化 methods: { btn1() { //1.push在最后添加元素 this.letters.push('f') //2. pop() 删除最后一个元素 this.
2022-05-25 20:35:14
299
原创 v-for使用/不使用key
不加key渲染时候会依次替换渲染，加了key会直接将其放在指定位置，加key提升效率。 虚拟DOM中key的作用 key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】,随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下： (1).旧虚拟DOM中找到了与新虚拟DOM相同的key： ①.若虚拟DOM中内容没变, 直接使用之前的真实DOM！ ②.若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM。 (2)
2022-05-25 20:23:44
1663
原创 计算属性的setter和getter
在计算属性中其实是由这样两个方法setter和getter。 computed: { fullName:{ //计算属性一般没有set方法，只读属性 set:function(value){ const names = value.split("-") this.firstName = names[0] this.lastName = names[1]
2022-05-23 19:40:53
394
原创 计算属性的复杂使用
现在有一个数组数据books，里面包含许多book对象，数据结构如下： <script> const vm = new Vue({ el: '#vm', data: { books: [ {id: 110,name: "JavaScript从入门到入土",price: 119}, {id: 111,name:
2022-05-23 18:52:48
169
原创 计算属性的基本使用
<div id="app"> <!-- Mastache语法拼接 --> <p>{{firstName}}{{lastName}}</p> <!-- 使用方法methods --> <p>{{fullName()}}</p> <!-- 使用计算属性computed --> <p>{{fullNam...
2022-05-23 16:58:43
300
原创 初识vue(2)
① v-bind动态绑定class(对象) 简写方式 “:”，如 :src。 我们会经常使用以对象的方式来动态绑定属性，极少使用数组的方式。 .active { color: red; } <div id="app"> <h2 :class="{active:isactive}">我是机灵鬼</h2> </div> const app = new Vue({ ...
2022-05-19 19:58:46
99
原创 初识vue
vue是一套用于构建用户界面的渐进式框架。 Mustache语法：是"胡子"的意思, 因为嵌入标记像胡子 {{}}: mustache 语法, 也被vue 使用 一、声明式渲染 <div id="app"> {{ message }} </div> var app = new Vue({ el: '#app', data() { return{ message: 'Hello Vue!' } } }) 以上数据和 DO.
2022-05-19 15:59:06
316
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人