vue.js学习笔记之v-model与表单

1.v-model:
你可以用 v-model 指令在表单、及元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

2.v-model之文本框：

 <div id="app">
        <p>输入框</p>
        <input type="text" style="color: red;" maxlength="10" v-model="msg1" placeholder="请任意发挥！" onkeyup='this.value = this.value.replace(/\D/gi,"")' dir="rtl">
        <p>您输入的是:{
  {msg1}}</p>
    </div>
    <script> let app = new Vue({
     el: "#app", data: {
     msg1: '' }, }) </script>
</body>

拓展：
1.文本框输入字数限制10个 –maxlength = "10"
2.输入颜色为红色--直接style样式
3.由右往左输入–dir="rtl"
4.输入限定为数字–注：用type = number可以实现，但是会产生副作用，比如maxlength会失效等等，不推荐使用，可以使用正则表达式。οnkeyup='this.value=this.value.replace(/\D/gi,"")
结果：

3.v-model之文本域：

  <div id="app">
        <p>文本域</p>
        <textarea v-model="msg" maxlength="10" name=" test " id="1" cols="30 " rows="10 " dir="rtl" style="color: blue;font-size: 30px; resize: none;"></textarea><span>您输入的内容：{
  {msg}}</span>

    </div>
    <script> let app = new Vue({
     el: "#app", data: {
     msg: '' } }) </script>
</body>

拓展：
1.文本域禁止拖动— resize: none
2.输入内容字数限制 —maxlength
3.内容倒序显示并：—dir = "trl"

4.v-model之多选框：

 <div id="app">
        <p>假设以下都能实现，你会选择：</p>
        <input type="checkbox" id="c1" value="100万" v-model="checkboxArrays">
        <label for="c1" style="color: green;">100万</label>
        <input type="checkbox" id="c1" value="佳丽三千" v-model="checkboxArrays">
        <label for="c1" style="color: orange;">佳丽三千</label>
        <input type="checkbox" id="c1" value="死提姆永久超级VIP" v-model="checkboxArrays">
        <label for="c1" style="color: red;">死提姆永久超级VIP</label>
        <br>
        <span>恭喜你获得了{
  {checkboxArrays}}，恭喜恭喜！</span>

    </div>
    <script> let app = new Vue({
     el: "#app", data: {
     checkboxArrays: [] } }) </script>

结果：

5.v-model之单选按钮：

 <div id="app" style="background-color:aquamarine;">
        <p>英雄正在推塔中，而女朋友来了一个电话，你会？</p>
        <input type="radio" id="r1" value="这是个正确的选择" v-model="radios">
        <label for="r1" style="color:green;font-size: 15px;">接</label>
        <input type="radio" id="r2" value="等死吧，你~你你~~你等死吧！" v-model="radios">
        <label for="r2" style="color: orchid;font-size: 20px;">不接</label>
        <input type="radio" id="r3" value="我仿佛听到了Shutdown的声音！" v-model="radios">
        <label for="r3" style="color:red;font-size: 25px;">继续打游戏</label>
        <input type="radio" id="r3" value="恭喜你做了明智的选择！！" v-model="radios"> <img src="imgs/" alt="">
        <label for="r3" style="color:red;font-size: 30px;">毫不犹豫，接</label>
        <br>
        <span>
            <p style="color: fuchsia;font-size: 80px;">{
  {radios}}</p>
            </span>
    </div>
    <script> let app = new Vue({
     el: "#app", data: {
     radios: '' } }) </script>

注解：在该单选按钮中，value的值才是真正你选择时会触发的值，而在label中的值，仅仅是做为一种描述，静态显示在网页上，作为一种提示信息。
结果：

5.v-model之单选框：

vue.js学习笔记之v-model与表单

全站热榜