vue 第二天 v-model 双向绑定 ，v-for用法

1. v-model 数据双向绑定

  <div id="app2">
        <div v-text="text"> </div>
        <textarea v-model="text">   </textarea>
    </div>

在 textarea 中输入文字  div中的内容会随之变化 ，text 的值 会变化，通过 v-model 可实现 双向绑定 变化后马上传给视图层

双向绑定 计算器案例！！

 <div id="app2">


        <input type="text" name="name"  v-model="n1" />

        <select v-model="opt"  >
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select>

        <input type="text" name="name"  v-model="n2" />
        <input type="button" name="name" value="="  @click="calc"  />
        <input type="text" name="name" v-model="result" />

    </div>
   
    <script src="Vue.js" type="text/javascript"></script>
    
    <script>

        const vm = new Vue({
            el:"#app2",
            data: {
                opt: '*',
                n1: 0,
                n2: 0,
                result: 0
            }, methods:
            {
                calc() {

                    switch (this.opt) {

                        case "+":

                            this.result = parseInt(this.n1) + parseInt(this.n2)
                            break;
                        case "-":
                            this.result = parseInt(this.n1) - parseInt(this.n2)
                            break;
                        case "*":
                            this.result = parseInt(this.n1) * parseInt(this.n2)
                            break;
                        case "/":
                            this.result = parseInt(this.n1) / parseInt(this.n2)
                            break;
                    }
                }

            }
        });
    </script>

以上 switch case 可以 用   this.result = eval(" parseInt(this.n1) " + this.opt + "  parseInt(this.n2) ");  替换

 2.  vue 写 style 内联样式 

   具体见视频 ：https://www.bilibili.com/video/BV11s411A7h6?p=16

3. v-for 用法

  a.      <div v-for="(item,index) in list"> 
            {{item}}
        </div>

  index 表示索引  或者 不加索引 如下：

<div v-for="item  in list">
            {{item}}
        </div>

 

const vm = new Vue({
            el:"#app2",
            data: {
                opt: '*',
                n1: 0,
                n2: 0,
                result: 0,
                list:[1,2,3,4,5,6,7,8,9]，
                user:{
                id:250,name:'szk',age:35,height:170
              }
            } 
        });

输出 10 个div

 

 b.  v-for 可以遍历对象

 <div v-for="(v,key) in user">
            {{key}}:{{v}}
        </div>

<script>

        const vm = new Vue({
            el:"#app2",
            data: {
               
                user: {
                    id: 250, name: 'szk', age: 35, height: 170
                }
            } 
        });
    </script>

效果如图：

 

 c.   遍历对象数组

 d.  遍历数字

<div v-for="item in 20"> 
{{item}}
</div>

 

 e. value ,key,index  联合使用