样式绑定

基础使用

样式的变量控制

最简单的添加样式的方法就是将class加到模板对应的标签上

如果想要对样式进行控制，就要使用class="xxx"关联data中的变量来控制样式

const app = Vue.createApp({
    data() {
        return {
            message: 'hello world',
            classString: 'red'
        }
    },
    template: `
        <div :class="classString">{{message}}</div>
    `
})
const vm = app.mount('#root')

样式的对象写法

把需要添加的style中定义大的样式写到对象中，样式名做为对象的key，应用样式value就是true，反之value则为false

const app = Vue.createApp({
    data() {
        return {
            message: 'hello world',
            classObject: {red: true,green: true},
        }
    },
    template: `
        <div :class="classObject">{{message}}</div>
    `
})
const vm = app.mount('#root')

运行结果： 2个样式都添加上了

样式的数组写法

把需要添加的style中定义大的样式写到数组变量中

 const app = Vue.createApp({
    data() {
        return {
            message: 'hello world',
            classArray: ['red','green']
        }
    },
    template: `
        <div :class="classArray">{{message}}</div>
    `
})
const vm = app.mount('#root')

样式的数组写法中结合对象的写法

  const app = Vue.createApp({
    data() {
        return {
            message: 'hello world',
            classArray: ['red','green',{brown: true}]
        }
    },
    template: `
        <div :class="classArray">{{message}}</div>
    `
})
 const vm = app.mount('#root')
 

子组件的样式

如下面定义了叫child的子组件

如何区别父组件和子组件？

const app = Vue.createApp({
    data() {
        return {
            classString: 'red',
            message: 'hello world',
            classArray: ['red','green',{brown: true}]
        }
    },
    template: `
        <div :class="classString">
            {{message}}
            <child/>
        </div>
    `
})
app.component('child',{
    template: `<div>我是子组件</div>`
})
const vm = app.mount('#root')

如上图所示，在使用 Vue.createApp()创建vue根应用时传的对象，决定了这个应用最外层的组件是什么样子，上例中在根组件调用了child子组件。主动调用的组件即上图中标记的区域叫父组件，被动调用的组件叫子组件即child组件

运行结果：为什么都变成红色了呢？

因为子组件本身没有样式，所以继承了父组件的样式

那么我们给子组件添加样式呢？

如果子组件的最外层只有一个标签，除了把样式写在子组件上之外，还可以把样式写在调用子组件的地方

const app = Vue.createApp({
    data() {
        return {
            classString: 'red',
            message: 'hello world',
            classArray: ['red','green',{brown: true}]
        }
    },
    template: `
        <div :class="classString">
            {{message}}
            // 调用子组件
            <child class="green" />
        </div>
    `
})
app.component('child',{
    template: `<div>我是子组件</div>`
})
const vm = app.mount('#root')

什么叫最外层只有一个标签？

<div>
    <div>1</div>
    <div>2</div>
</div>

上面这种叫最外层只有一个标签

如果是这样：

<div>1</div>
<div>2</div>

上面这种叫最外层就有2个标签

如果子组件中最外层有2个以上的节点呢？

如果还像上面一样把样式写在调用子组件的地方，样式就会失败，原因是vue不知道应该把样式作用于哪个节点上

如何解决呢？

最简单的方法就是把样式分别写在子组件的2个节点上

如果子组件中的哪个节点想让在调用子组件时传的样式生效，只需要在子组件对应的节点上

:class="$arrrs.class",它的意思是子组件的某个节点的样式是调用子组件时属性的class的值

 const app = Vue.createApp({
    data() {
        return {
            classString: 'red',
            message: 'hello world',
            classArray: ['red','green',{brown: true}]
        }
    },
    template: `
        <div :class="classString">
            {{message}}
            <child class="green" />
        </div>
    `
})
app.component('child',{
    template: `
      <div :class="$attrs.class">节点1</div>
      <div>节点2</div>
    `
})
const vm = app.mount('#root')

运行结果：

行内样式的写法

当然最简单的写法就是把行内样式写在模板的标签上

vue也拓展了其他的语法，帮助我们去控制样式

1. 绑定属性的形式写行内样式style

使用绑定属性来关联data中的变量当然也是可以的

const app = Vue.createApp({
    data() {
        return {
            classString: 'red',
            message: 'hello world',
            classArray: ['red','green',{brown: true}],
            styleString: 'color: yellow'
        }
    },
    template: `
        <div :style="styleString">
            {{message}}
        </div>
    `
})
const vm = app.mount('#root')

2. 对象的形式写行内样式style

这种写法就比上面的写法写起来舒服很多，可读性也更好

const app = Vue.createApp({
    data() {
        return {
            classString: 'red',
            message: 'hello world',
            classArray: ['red','green',{brown: true}],
            styleString: 'color: yellow',
            styleObject: {
                color: 'orange'
            }
        }
    },
    template: `
        <div :style="styleObject">
            {{message}}
        </div>
    `
})
const vm = app.mount('#root')

条件渲染

v-if

通过控制元素在DOM上的存在与否来控制展示和隐藏，为true的时候就增加DOM，为false的时候就移出DOM

只有当v-if的值是true的时候，模板中的被v-if控制的内容才会展示，否则就把DOM直接移出了

v-if是通过控制元素在DOM上的存在与否来控制元素的显示和隐藏

const app = Vue.createApp({
    data() {
        return {
          show: false
        }
    },
    template: `
        <div v-if="show">Hello World !</div>
        <div v-show="show">Bye World !</div>
    `
})
const vm = app.mount('#root')

v-show

通过控制DOM元素中style样式中的display:none: 和 display:block:来控制元素的展示和隐藏

总结： v-if 和 v-show哪个更好？

如果我们频繁的控制DOM元素展示与否就使用v-show,因为它不会频繁的销毁DOM，性能更好。否则二者选一个方法都可以

v-if、v-else-if 和 v-else

const app = Vue.createApp({
    data() {
        return {
          show: false,
          conditionOne: false,
          conditionTwo: true
        }
    },
    template: `
        <div v-if="conditionOne">v-if</div>
        <div v-else-if="conditionTwo">v-else-if</div>
        <div v-else>v-else</div>
    `
})
const vm = app.mount('#root')

注意：

v-if、v-else-if和v-else要紧紧贴在一起，否则可能会报错