【vue2第四章】使用v-bind操作class,style 和 v-model应用于表单属性

使用v-bind操作class,style 和 v-model对表单属性的操作

一、使用v-bind操作class,style

1.操作class（数组，对象）的方法

首先使用对象的方式。
一下这端代码就是实现了，一个简单的导航栏，为每个菜单设置了点击事件，从而改变每个菜单的class样式

 <style>
        li{
            list-style: none;
        }
        .menu>li{
            float: left;
            width: 100px;
            height: 40px;
            border: 1px solid yellow;
            text-align: center;
            line-height: 40px;
        }
        .active{
            background-color: pink;
        }
    </style>
    <div id="box">
        <ul class="menu">
	        <!-- v-bind绑定,{样式名:表达式} 表达式为true样式存在，为false则不存在-->
            <li :class="{active : index ===indexactive}"
                 <!-- 点击事件将当前下标赋值给indexactive -->
            	 @click="indexactive = index" 
                 <!-- 循环遍历list -->
            	 v-for="(item,index) in list" 
            	 :key="item.id">{{ item.content }}</li>
        </ul>
    </div>
    <script src="js/vue.js"></script>
    <script>
        const app = new Vue({
            el:"#box",
            data:{
                list:[
                    {id:1,content:"首页"},
                    {id:2,content:"搜索"},
                    {id:3,content:"我的"},
                ],
                //判断样式存在的条件，当下标等于这个变量则存在样式
                indexactive:0
            }
        })
    </script>

下面就是使用数组的方式，为元素添加样式，可以看到数组中的class全都被添加到了li标签：

2、操作style的方法
v-bind对样式控制的增强，适用于操作某个具体属性的动态设置。

接下来是一个关于进度条的代码例子，将样式width与data中的num绑定，再通过点击事件改变num的值从而修改进度条的进度。

<style>
        .bigbox{
            width: 500px;
            border: 3px solid black;
            border-radius: 50px;
            height: 20px;
        }
        .box{
            height: 100%;
            background-color: blue;
            border-radius: 50px;
        }
    </style>
    <div id="box">
        <div class="bigbox">
            <!-- 绑定当前宽度属性为num值 -->
            <div class="box" :style="{width :num+'%'}"></div>
        </div>
        <!-- 通过点击事件修改num的值从而改变进度条样式 -->
        <button @click="num = 25">到25%</button>
        <button @click="num = 50">到50%</button>
        <button @click="num = 75">到75%</button>
        <button @click="num = 100">到100%</button>
    </div>
    <script src="js/vue.js"></script>
    <script>
        const app = new Vue({
   
            el:"#box",
            data:{
               num:0
            }
        })    
    </script>

一、使用v-model应用于表单属性

常见的表单元素都可以使用v-model绑定关联 快速 获取 或者 设置 表单元素的值
它会根据 控件类型 自动选取 正确的方法来更新元素。

表单元素	v-model取到的值
输入框 input:text	value
复选框input:checkbox	checked
单选框:radio	checked
下拉菜单select	value
文本域textarea	value
…	…

如下方的代码示范: