vue实训第二天

第一题：
（vue的v-for语法可以遍历哪些值）
1.v-for迭代属性

<p v-for="(str,index) in array">诗句:{{str}}==下标:{{index}}</p> -->

2.v-for迭代普通数字

<p v-for="i in 10">数字:{{i}}</p> -->

3.v-for迭代数组

<p  v-for="{value,key} in sj">
         <span>{{i}}</span>
         <span>{{key}}</span>
         <span>{{value}}</span>
</p>

第二题：
（v-model和v-bind的差别）
v-model作用于input表单元素，是一种双向绑定，默认就是将表单元素的value属性和data中的某数据进行绑定
v-bind:value绑定是一种单项绑定，即只能将m中的数据绑定到标签内，m改变，标签内的属性值也会改变，但标签内的属性值的变化无法体现到m中

第三题：
（v-show和v-if的差别）
v-if是通过将其从源代码中移除的方法来使标签消失
v-show是通过设置display:none;的方式使标签隐藏

第四题：
（将M中数据设置为标签的类有几种方式）

方式一:单个设置给值

body中代码:

<div id="app">
<div :class="c1">单个设置</div>
</div>

js中代码：

c1:'cred'

方式二:对象设置

body中代码:

<div id="app">
<div :class="cObj">对象设置</div>
</div>

js中代码：

cObj:{
       cred:true,
       w100:true,
       byellow:true
}

方式三:简单数组设置

body中代码:

<div id="app">
<div :class="cSimpleArray">简单数组设置</div>
</div>

js中代码：

cSimpleArray:['cred','w100','byellow']