vue-第四天

昨天写算法题啥也写不出来，太崩溃了所以写了一会就去看js语法了，不过晚上的学习时间比较短，主要学习内容只包括js的变量声明和数据类型。感觉自己的算法实在是太辣鸡了，总而言之还是代码量不够，打算按照蓝桥杯复习思路从最最简单的题目开始写，希望能量变产生质变吧！

今天上午的vue主要学的内容是绑定表单元素：input、textarea和select。

<input v-model="name" placeholder="请输入姓名">

<p>{{name}}您好！</p>

v-model将文本框的value属性与name属性进行绑定，后绑定input事件

<textarea v-model="comment" placeholder="请输入你的留言"></textarea>

<p>你的留言是：</p>

<p style="white-space: pre-line;">{{comment}}</p>

①多行文本不能直接{{}}而要通过v-model指令

"white-space: pre-line;//合并连续空格保留换行符

①单选按钮绑定

   <input type="radio" value="c++" v-model="language" id="c++">

        <label for="c++">c++</label>

②复选按钮绑定

<input type="checkbox" value="c++" v-model="language1" id="c++1">

<label for="c++1">c++</label>

③下拉框绑定

<select v-model="language2">

    <option disabled value="">请选择</option>

    <option>c++</option>

    <option>java</option>

    <option>python</option>

</select>

④下拉框多选 “multiple”

<select multiple v-model="language2">

    <!-- <option disabled value="">请选择</option> -->

    <option>c++</option>

    <option>java</option>

    <option>python</option>

</select>

⑤键值对绑定

<span>请选择一种语言{{selected}}</span>

<br />

<select multiple v-model="selected">

    <option v-for="option in language3" :value="option.value">

        {{option.text}}

    </option>

</select>

修饰符：

• .lazy惰性绑定

V-model在每次input触发后同步改为change触发后同步

<div id="app">

<input v-model.lazy="msg">

<span>{{msg}}</span>

</div>

视图不再随输入框实时更新，而是在输入框失去焦点时更新

• .number将输入值转为数值

<div id="app">

<input v-model.number="age" type="number">

<span>{{age}}</span>

</div>

input标记的值总会返回字符串，使用number修饰符后先转化为数值再赋值给数据模型

若无法被parseFloat（）方法解析，则会返回原值

• .trim自动过滤首尾输入的空白字符

<div id="app">

<input v-model.trim="msg">

<span>一共有{{msg.length}}个字符</span>

</div>

当用户输入的字符有空格时，不加修饰符.trim则会计数，加修饰符.trim则会自动过滤首尾空格