vue学习day02

文字叙述v-model和v-bind的差别

v-bind

v-bind:主要用于属性绑定，这个绑定是单向的。即为在

  <input type="text" v-bind:value="msg">

代码中当data中的数据发生改变的时候，文本框的value也会发生改变。但是当View（视图层）中的value数据发生改变的时候并不会影响到model中的data数据发生改变。同时支持简写为 :value=“msg”，不需要添加v-value。
提一句v-once只渲染一次，当data中的数据改变时,内容不会继续更新。

v-model

v-model:适用于表单元素，比如input,select等，是双向绑定，能将表单元素的value属性设置传到与之绑定data属性，同时data的数据改变也会影响到value属性的值。该表单元素value属性和data属性绑定是默认行为，不需要显示v-model:value=“msg”，v-model="msg"即可。

 <input type="text" v-model="msg">

vue的v-for语法可以遍历那些值

1、遍历字符串

 <p v-for="i in Str">{{i}}</p>
 ……
 Str:"HelloWorld

2、遍历整数

<p v-for="(val ,index) in 10">i的值为：{{val}}==={{index}}</p>

3、遍历数组

<p v-for="(val ,index) in names">i的值为：{{val}}</p>
……
names: ['尼古拉斯凯奇', '尼古拉斯赵四', '杰森斯坦森'],

4、遍历对象

<p v-for="val,key,index in Obj">{{key}}=={{val}}</p>
 ……
Obj: {
          name: '罗小黑',
          age: 20,
          sex: '男',
}

文字描述一下v-show和v-if的差别

v-if

当条件为false时，包含v-if的指令元素，不会显示在dom中。每次都会重新删除或创建元素。

v-show

当条件为false时，v-show不会重新进行DOM的删除和创建操作，只是给我们的元素添加了一个行内的样式：display:none。

将M中数据设置为标签的类有几种方式？

   .a {
            font-size:20px;

        }
        .b{
            color: red;
        }

1、字符串

将字符串直接设置给class属性值

<div v-bind:class="cStr">字符串设置class</div>
……
cStr: 'a b c'，

2、对象

当对象与class属性绑定的时候，会将对象中值是true的那些属性名设置为标签的类

 <div v-bind:class="cObj">对象设置class</div>
 ……
  cObj: {
                a: true,
                b: true,
            },

3、数组

此处代码中在dom中解析出的结果为"a b c d f f"

 <div v-bind:class="cArray">数组设置class</div>
 ……
  cArray:['a b c','d','e',{f:true,g:false}],