** computed的使用**
** 视图**
< p v- for = "subject in results" : key= "subject" >
< span> Marks for : {
{
subject. ages } } < / span>
< / p>
< p>
Total marks are: {
{
totalages } }
< / p>
** js**
computed: {
totalages: function ( ) {
let total = 0 ;
let that = this ;
for ( let i= 0 ; i< that. results. length; i++ ) {
total+= parseInt ( that. results[ i] . ages)
}
return total
}
} ,
** 动态class **
< ! -- 1 使用computed属性 -- >
< div id= "example" class = "static" v- bind: class = "haha" > 的风景的话< / div>
< ! -- 2 数组语法 -- >
< div id= "example" class = "static" v- bind: class = "[class2]" > 订饭订饭订< / div>
< ! -- 3 对象语法 -- >
< div : class = "{active:isactive}" > 多放点胡椒粉< / div>
< ! -- 4 数组与三元运算符结合判断选择需要的class
注意:三元运算符后面的“:”两边的class 需要加上单引号,否则不能正确渲染 -- >
< div : class = "[activefalse == 1? 'active' : 'blue']" > 你好< / div>
** 动态class 的js操作**
export default {
data ( ) {
return {
isactive: true ,
activefalse: 2 ,
class1: 'orange' ,
class2: 'green' ,
age: 4 ,
}
}
computed: {
haha: function ( ) {
return {
'orange' : this . age > 3 ? true : false ,
}
}
} ,
}
** 动态class 样式**
< style>
. orange {
color: orange;
}
. green {
color: green;
}
. active{
color: red;
}
. blue{
color: blue;
}
. red{
color: red;
}
< / style>
** nextTick简单使用** ** **
< input type= "button" value= "点我呀" @click= "changeStr" / >
< p ref= "myP" > {
{
str} } < / p>
export default {
data ( ) {
return {
str: "公众号 张培跃,关注它的人很少!" ,
} ;
}
}
** 第一种使用方式**
created ( ) {
this . $nextTick ( ( ) => {
this . $refs. myP. innerText =
"我是一只小小小小鸟,想要飞,却怎么样也飞不高!" ;
} ) ;
} ,
** 第二种使用方式**
methods: {
changeStr ( ) {
this . $nextTick ( ( ) => {
console. log ( this . $refs. myP. innerText) ;
this . str = "欢迎关注公众号 张培跃,收看更多精彩内容!" ;
} ) ;
this . str = "我爱你中国,我亲爱的母亲!" ;
}
}