Vue 属性操作 动态样式 动态style样式 Day02

属性操作

属性语法, vue1 中: v-bind: 属性名 =”JS 代码 ”

{{baidu.title}}

vue2 语法 : 属性名 =”JS 代码 ”

{{baidu.title}}

注意: 

1. {{}} : 仅限在 标签内容中使用

2. : 和不带: 的差异, 不带: 是 HTML 语法, 值是字符串, 带: 是 Vue 语法, 值是 JS 代码, 会运算

1111

1111

动态样式

点击谁, 谁高亮显示, 先书写 HTML 再来书写 CSS, 其次就是 JS 啦

    
    
    
    
    


    

        
 当前序号: {{now}}
        

            
 首页 
            
 关于净美仕 
            
 公司动态 
            
 产品中心 
            
 联系我们 
        
    

    
    

 数据: 保存当前激活的 项目序号, 现在 Vue 声明一下当前序号, 然后每一个 li 元素绑定点击事件, 添加 class 样式就可以了, 简化语法: 本质上 判断 now== 几, 是真就 active 不是就空, :class=”{active: now== 几}”  , 真就添加 active, 假就不添加 active

动态 style 样式

 变大:{{size}}
Hello

• 属性名支持两种写法: 小驼峰 和 蛇形命名法

• 属性名不允许中划线, 必须用字符串才合法

作者提供了优化语法

World