Vue样式及动态绑定

Vue样式

在Vue 中使用样式；
一、使用class样式：
类名必须用引号 引起来；
1、数组

这种方法 需要用 v-bind: => : 绑定
2、数组中使用三元表达式

这种方法 需要用 v-bind: => : 绑定
3、数组中嵌套对象

这种方法 需要用 v-bind: => : 绑定
4、直接适用对象

这种方法 需要用 v-bind: => : 绑定
一般 可变的通过vue 来写；
二、使用内联样式；
1、直接在元素上通过 :style 的形式

这种方法 需要用 v-bind: => : 绑定
2、将样式对象，定义到data 中，在引用到 :style 中

这种方法 需要用 v-bind: => : 绑定
3、在 :style 中通过数组，引用多个 data 上的样式对象；

这种方法 需要用 v-bind: => : 绑定

过滤器

Vue中过滤器有两种定义方式?
1.全局过滤器 2.局部过滤器

Vue.filter('myfilter', function(val) {
          return formatNum(val);
        })

用法

  var app = new Vue({
            el: "#app",
            methods: {

            },
            data: {
                money: "1000000000000000000"
            },
            filters: { //过滤器的方法
                myfilter(val) {
                    return fn(val) //fn为自己定义的一个函数
                }
            }
        })

在html中引用过滤器

 

        {{money | myfilter}}
    

v-if和v-show的用法

v-show：
html中需要隐藏的元素上加 v-show=" "即可
一下为 v-show的案例

    

        
吃饭睡觉打豆豆
        显示/隐藏
    

v-if：
v-if和v-else可以一起用，案例为两个页面切换
显示的内容不一样

    

        切换模板
        
        

    
    

动态绑定样式

style写一个类名的样式，vue模块中data里要加上myclass，值为设置的类名

 .border {
            border: 1px solid #999;
            border-radius: 50%;
        }

VUE模块为：

 var app = new Vue({
            el: "#app",
            data: {
                flag: true,
                myclass: "border"
            }
        })

1. 对象方式 {className: 数据模型}

2. 数组可以进行属性绑定

3. 表达式

动态绑定style

vue块中data里的属性应加上对象 写入要增加的样式

 var app = new Vue({
            el: "#app",
            data: {
                flag: true,
                mystyle: {
                    borderRadius: '50%'
                }
            }
        })

1. 对象方式进行绑定 {css属性值: 值或者数据模型}

2. 传进去的数据模型应该是对象形式的样式！！！

3. 表达式

ref属性

ref用来要查找的元素，在此元素上加上ref属性，vue中用$refs来查找

 

        
11111111111
    
    

nextTick 滴答

用来解决页面中异步问题
例如：加载页面时聚焦
由于加载页面时异步，需要消耗一定的时间，而聚焦是同步，所以通常会 在没有页面加载完毕时，聚焦这个动作已完成，所以当页面加载完毕后会没有聚焦的效果，可以用nextTick 来解决，记住使用nextTick 这个方法是通常使用$nextTick并使用箭头函数

  

        显示隐藏