(尚硅谷)Vue笔记-------09

绑定Class样式

 

我们写了很多class样式，我们通过vue的绑定方式可以动态去修改样式：

 

当我们点击时：

 

但是这样是我们在方法中写死了，我们想做的是在三种样式中随机出现。

 

我们需要在方法中进行修改就可以了，采用数组的形式，对下标进行随机数向下取整（0 1 2），

然后改变mood值，这样就可以随机产生样式了。

 

我们使用这种方式可以同时引用多个样式，数组形式。

还有第三种绑定形式：

 

 

我们也可以不用这种对象也可以做判断：

 

 

但是我们使用对象形式便于管理。

绑定style样式 

 

我们写了这样一个div，我们想让40px这个长度交给vue来处理。

 

 

 

当然我们还可以换一种写法：

 

 

 

我们这就是分开来写了。

我们也可以使用数组的形式来写：

 在data中传入数组

 

但是这种方式就很少用了。

总结：

绑定样式:

1.class样式

写法:class="xxx" xxx可以是字符串，对象，数组

字符串写法适用于：类名不确定，要动态获取

对象写法适用于：要绑定多个样式，个数不确定，名字也不确定

数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用

2.style样式

：style="{fonSize:xxx}" 其中xxx是动态值

:style="[a,b]"其中a,b是样式对象。

条件渲染 

 

上面是一个简单的vue实例。我们的渲染效果就是让内容有一个隐藏和显示的切换。

我们可以用v-show进行处理 true就显示 false就隐藏。v-show是结构在但是在页面中显示。

我们也可以用v-if=‘false’进行处理，但是v-if处理之后就是结构也不存在了。

 

我们现在有一个这样简单的应用，我们想在这个页面出现的效果是，点击一下出一个模块，再点一下再出一个，再点一下出另外一个。

 

我们这里就用了这样一个v-show的判断：

 

 

我们可以去改变判断的条件，去改变页面的显示。 

当然我们使用v-if也可以做到同样的效果。

我们变化频率高的时候用v-show，低的时候用v-if。

我们在js中使用过if-else。当然我们在vue中也可以使用这个去实现上述内容：

 我们也可以使用else:

 

 在我们使用if else-if else的时候，是不允许被打断的。

我们想n是1的时候同时出现3个h2标签，我们还不行每个h2标签都去写v-show，所以我们只能强加一个div改变了结构。这是不太好的。

所以我们可以引入template，这个在页面结构中不会出现，但是它不可以和v-show一起使用，我们让它和v-if一起使用可以达到效果：

 

 

 我们可以用这几种方式去做各种判断。

总结：

条件渲染:

1.v-if

写法:

（1）v-if=“表达式”

（2）v-else-if="表达式"

（3）v-else="表达式"

适用于：切换频率较低的场景

特点：不提示的DOM元素直接被移除

注意：v-if可以和v-else-if,v-else一起使用，但要求结构不能被打断

2.v-show

写法：v-show="表达式"

适用于:切换频率较高的场景

特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉

3.备注：使用v-if的时候，元素可能无法获取到，而使用v-show一定可以获取到

列表渲染

我们想把我们vue中的person信息在body中的列表中遍历出来，这是我们需要去学习的内容。

怎么在vue中实现遍历呢？

 我们需要使用v-for指令：

 

我们不加key的话，也完全可以遍历出来并且没有错误，但是为什么要加key我们下一小节的时候回去说明。我们的key注意如果我们加了，不能是相同的值。

我们在v-for中还可以这么写：

 

 

会打印出我们的索引。这种类似多个参数的情况也是可以的。

在v-for中，我们也可以用of代替语句中的in效果是一样的。

我们刚才是遍历的数组，其实我们也能遍历对象：

 

 

 

key就是它的属性名，value就是它的内容。

我们还可以遍历字符串：

 

 

 

 这个遍历字符串用的比较少。

我们还可以遍历指定次数，这个也是用的更少了：