mysql 计算属性_vue 02-上计算属性、样式的操作,指令(含自定义,全局和局部)...

计算属性: 是一个函数,所依赖的元数据变化时,就会再次执行

典型案例todolist

computed:{

计算属性: function(){return 返回值}使用:{{计算属性}}

}

与method的区别:方法会每次调用,计算属性不会

计算属性的性能高: 适合做筛选,基于它们的响应式依赖进行缓存的

方法:适合在列表渲染使用,强制渲染执行

计算属性:计算属性也可以是个对象

读取了属性 -> get:fn

修改了属性 -> set:fn

{{ cptStr }}

let vm = new Vue({

el: '#example-5',

data: {

str: 'i love you',

},

computed:{

/* cptStr(){

return this.str.split(' ').reverse().join(' ')

} */

cptStr:{

get: function(){

console.log('get')

return this.str.split(' ').reverse().join(' ')

},

set: function(val){

this.str = val;

console.log('set')

}

}

}

})

在控制台输入vm.str='123'页面会立刻改123.即set发生改变

2、样式的操作

class操作/style操作:

v-bind:class="数据|属性|变量|表达式"

:class/style = " 数据 "数据类型:字符/对象 / 数组

:class="{类名:true,类名2:false}" 布尔值决定样式是否使用

:style="[{css属性名:值},{css属性名小驼峰:值}]"

class动态绑定

按钮1

按钮2

按钮3

按钮4

按钮5

style动态绑定

按钮1

let vm = new Vue({

el: '#app',

data: {

cl1:'btn btn-primary'

}

})

3、指令

指令: 扩展了html语法功能,区别了普通的html属性

vue自带的指令:v-text/v-html/v-bind/v-for/v-model/v-on

v-show="布尔" v-if="布尔"

区别:操作css操作dom

场景:适合频繁切换 适合不频繁切换

性能:初始渲染消耗频繁切换回有消耗

其他指令: https://cn.vuejs.org/v2/api/#指令

指令(directive):

v-text/v-html/v-bind/v-on/v-model/v-for/v-if/v-show/v-else/v-else-if

自定义指令: 指令是个函数|对象,用来操作dom的, 里面的this 返回window

a)全局:Vue.directive('指令名不带v-',函数(el,binding))

el == 使用指令的DOM元素

binding 是个对象 含有传入的 参数(binding.value)

b)局部: 定义在选项里面

directives:{

指令名不带v-: 函数(el,binding){}

}

box
box2
box3

Vue.directive('color',function(el,binding){

// console.log('指令运行',el,binding) //el== dom元素 binding == 指令信息,传入的值等

console.log('指令运行',this);//指令函数内部的 this指向window

el.style.background=binding.value|| 'red';

// $(el).css('background',binding.value|| 'red');

})

Vue.directive('color',function(el,binding){

el.style.background=binding.value||'green';

})

let vm = new Vue({

el: '#app',

data: {

colorValue:'blue'

}

})

####局部指令

box
box2
box3

/* Vue.directive('color',function(el,binding){

// console.log('指令运行',el,binding) //el== dom元素 binding == 指令信息,传入的值等

console.log('指令运行',this);//指令函数内部的 this指向window

el.style.background=binding.value|| 'red';

// $(el).css('background',binding.value|| 'red');

}) */

let vm = new Vue({

el: '#app',

data: {

colorValue:'blue'

},

directives: {

color:function(el,binding){

console.log('指令运行',this);//指令函数内部的 this指向window

el.style.background=binding.value|| 'red';

}

}

})

###全局和局部的差异

box
box2
box3

box
box2
box3

/* Vue.directive('color',function(el,binding){

// console.log('指令运行',el,binding) //el== dom元素 binding == 指令信息,传入的值等

console.log('指令运行',this);//指令函数内部的 this指向window

el.style.background=binding.value|| 'red';

// $(el).css('background',binding.value|| 'red');

}) */

let vm = new Vue({

el: '#app',

data: {

colorValue:'blue'

},

directives: {

color:function(el,binding){

console.log('指令运行',this);//指令函数内部的 this指向window

el.style.background=binding.value|| 'red';

}

}

})

let vm2 = new Vue({

el: '#app2',

data: {

colorValue:'blue'

},

/* directives: {

color:function(el,binding){

console.log('指令运行',this);//指令函数内部的 this指向window

el.style.background=binding.value|| 'red';

}

} */

})

把全局函数注释掉后发现app2不能用了,因为局部函数只能影响当时在的一部分会报错

 
 

vue.js:634 [Vue warn]: Failed to resolve directive: color

(found in )

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值