【Vue3 从入门到实战进阶式掌握完整知识体系】009-Vue

作者: 訾博ZiBo | 来源:发表于2021-06-22 21:54 被阅读0次

9、表单中双向绑定指令的使用

input双向绑定写法

双向绑定：你变我也变，我变你也变，时时刻刻一起变！

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hello vue</title>
  <!-- 引入Vue库 -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  const app = Vue.createApp({
    data() {
      return {
        message: 'Hello World'
      }
    },
    // input 使用 v-model 就不需要使用 value 了
    template: `
        <div>
          {{ message }}
          <br/>
          <input v-model="message" />
        </div>
    `
  });

  const vm = app.mount('#root');
</script>

</html>

运行结果

image-20210613092121068.png

textarea双向绑定写法

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hello vue</title>
  <!-- 引入Vue库 -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  const app = Vue.createApp({
    data() {
      return {
        message: 'Hello World'
      }
    },
    // textarea 直接如下所写即可，剩下的交给 vue
    template: `
        <div>
          {{ message }}
          <br/>
          <textarea v-model="message" />
        </div>
    `
  });

  const vm = app.mount('#root');
</script>

</html>

运行结果

image-20210613092717959.png

checkbox单选写法

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hello vue</title>
  <!-- 引入Vue库 -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  const app = Vue.createApp({
    data() {
      return {
        message: false
      }
    },
    template: `
        <div>
          {{ message }}
          <br/>
          <input type="checkbox" v-model="message" />
        </div>
    `
  });

  const vm = app.mount('#root');
</script>

</html>

运行结果

image-20210613093113304.png

checkbox多选写法

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hello vue</title>
  <!-- 引入Vue库 -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  const app = Vue.createApp({
    data() {
      return {
        message: []
      }
    },
    template: `
        <div>
          {{ message }}
          <br/>
          大哥刘备<input type="checkbox" v-model="message" value="大哥刘备" /><br/>
          二哥关羽<input type="checkbox" v-model="message" value="二哥关羽" /><br/>
          三哥张飞<input type="checkbox" v-model="message" value="三哥张飞" /><br/>
          四哥赵云<input type="checkbox" v-model="message" value="四哥赵云" /><br/>
        </div>
    `
  });

  const vm = app.mount('#root');
</script>

</html>

运行结果

image-20210613093453271.png

radio单选写法

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hello vue</title>
  <!-- 引入Vue库 -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  const app = Vue.createApp({
    data() {
      return {
        message: '未勾选任何大哥'
      }
    },
    template: `
        <div>
          {{ message }}
          <br/>
          大哥刘备<input type="radio" v-model="message" value="大哥刘备" /><br/>
          二哥关羽<input type="radio" v-model="message" value="二哥关羽" /><br/>
          三哥张飞<input type="radio" v-model="message" value="三哥张飞" /><br/>
          四哥赵云<input type="radio" v-model="message" value="四哥赵云" /><br/>
        </div>
    `
  });

  const vm = app.mount('#root');
</script>

</html>

运行结果

image-20210613093731017.png

select单选写法

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hello vue</title>
  <!-- 引入Vue库 -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  const app = Vue.createApp({
    data() {
      return {
        // 建议给一个默认值，因为默认第一个是勾选上的
        message: '大哥刘备'
      }
    },
    template: `
        <div>
          {{ message }}
          <br/>
          <select v-model="message">
            <option>大哥刘备</option>
            <option>二哥关羽</option>
            <option>三哥张飞</option>
            <option>四哥赵云</option>
          </select>
        </div>
    `
  });

  const vm = app.mount('#root');
</script>

</html>

运行结果

image-20210613094141322.png

select多选写法

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hello vue</title>
  <!-- 引入Vue库 -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  const app = Vue.createApp({
    data() {
      return {
        message: []
      }
    },
    template: `
        <div>
          {{ message }}
          <br/>
          <select v-model="message" multiple>
            <option>大哥刘备</option>
            <option>二哥关羽</option>
            <option>三哥张飞</option>
            <option>四哥赵云</option>
          </select>
        </div>
    `
  });

  const vm = app.mount('#root');
</script>

</html>

运行结果

image-20210613094448026.png

使用v-for改写select多选写法

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hello vue</title>
  <!-- 引入Vue库 -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  const app = Vue.createApp({
    data() {
      return {
        message: [],
        options: ["大哥刘备","二哥关羽","三哥张飞","四哥赵云"],
        // 对象数据写法，value 里面可以存储任意的内容
        options2: [{
          text: '大哥刘备', value: '大哥刘备'
        },{
          text: '二哥关羽', value: '二哥关羽'
        },{
          text: '三哥张飞', value: '三哥张飞'
        },{
          text: '四哥赵云', value: '四哥赵云'
        }]
      }
    },
    template: `
        <div>
          {{ message }}
          <br/>
          <select v-model="message" multiple>
            <option v-for="item in options">{{item}}</option>
          </select>
          <!--对象数组写法-->
          <select v-model="message" multiple>
            <option v-for="item in options2" :value="item.value">{{item.text}}</option>
          </select>
        </div>
    `
  });

  const vm = app.mount('#root');
</script>

</html>

运行结果

image-20210613095415156.png

自定义checkbox选择显示内容

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hello vue</title>
  <!-- 引入Vue库 -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  const app = Vue.createApp({
    data() {
      return {
        // 需求：在选中时显示“hello”，未选中显示“bye”
        message: 'bye'
      }
    },
    template: `
        <div>
          {{ message }}
          <br/>
          <input type="checkbox" v-model="message" true-value="hello" false-value="bye" />
        </div>
    `
  });

  const vm = app.mount('#root');
</script>

</html>

运行结果

image-20210613100042391.png

懒加载修饰符lazy

输入框失去焦点时绑定生效

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hello vue</title>
  <!-- 引入Vue库 -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  const app = Vue.createApp({
    data() {
      return {
        message: 'hello world'
      }
    },
    template: `
        <div>
          {{ message }}
          <br/>
          <input v-model.lazy="message" />
        </div>
    `
  });

  const vm = app.mount('#root');
</script>

</html>

运行结果

image-20210613100356913.png

数字修饰符number

将输入框里面的内容转换为number再存入绑定的属性中

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hello vue</title>
  <!-- 引入Vue库 -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  const app = Vue.createApp({
    data() {
      return {
        message: 'hello world'
      }
    },
    template: `
        <div>
          {{ typeof message }}
          <br/>
          <input v-model.number="message" type="number" />
        </div>
    `
  });

  const vm = app.mount('#root');
</script>

</html>

运行结果

image-20210613100810478.png

去前后空格修饰符trim

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hello vue</title>
  <!-- 引入Vue库 -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  const app = Vue.createApp({
    data() {
      return {
        message: 'hello world'
      }
    },
    template: `
        <div>
          {{ message }}
          <br/>
          <input v-model.trim="message" />
        </div>
    `
  });

  const vm = app.mount('#root');
</script>

</html>

运行结果

image-20210613101009905.png

【Vue3 从入门到实战进阶式掌握完整知识体系】009-Vue

9、表单中双向绑定指令的使用

input双向绑定写法

运行结果

textarea双向绑定写法

运行结果

checkbox单选写法

运行结果

checkbox多选写法

运行结果

radio单选写法

运行结果

select单选写法

运行结果

select多选写法

运行结果

使用v-for改写select多选写法

运行结果

自定义checkbox选择显示内容

运行结果

懒加载修饰符lazy

运行结果

数字修饰符number

运行结果

去前后空格修饰符trim

运行结果

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

【Vue3 从入门到实战 进阶式掌握完整知识体系】009-Vue

9、表单中双向绑定指令的使用

input双向绑定写法

运行结果

textarea双向绑定写法

运行结果

checkbox单选写法

运行结果

checkbox多选写法

运行结果

radio单选写法

运行结果

select单选写法

运行结果

select多选写法

运行结果

使用v-for改写select多选写法

运行结果

自定义checkbox选择显示内容

运行结果

懒加载修饰符lazy

运行结果

数字修饰符number

运行结果

去前后空格修饰符trim

运行结果

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

【Vue3 从入门到实战进阶式掌握完整知识体系】009-Vue