软件测试学习笔记丨 Vue 常用指令 - 输入绑定（v-model）

作者：测试人

2024-11-05
北京
本文字数：1443 字
阅读完需：约 5 分钟

本文转自测试人社区，原文链接：https://ceshiren.com/t/topic/23461

指令

指令是将一些特殊行为应用到页面 DOM 元素的特殊属性

格式都是以 v-开始的，例如：

v-model：双向绑定
v-if 和 v-else：元素是否存在
v-show：元素是否显示
v-on：绑定事件
v-bind：绑定属性

v-model 双向绑定

作用：实现标签中数据的双向绑定

实质：监听元素，根据元素的不同选取不同的 property 抛出不同的事件

适用的表单元素： <input>、<textarea>、<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>Document</title>    <!-- 引入vue -->    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script></head><body>    <div id="app">        <!-- 定义输入框，绑定msg变量 -->        <input type="text" v-model="msg">        <!-- 与输入框同步值，显示 msg 的值 -->        <h2>{{msg}}</h2>    </div></body></html><script>    var vm = new Vue({        el: "#app",        data:{            // 定义 msg 数据            msg: '',        }    })</script>

复制代码

data

vue 中的 data 属性专门以对象方式存放数据
vue 中 data 的两种定义方式

<!--第一种：Object--><script type="text/javascript">    var app = new Vue({        el:"app",        data:{            isLogin: false        }    })</script><!--第二种：Function--><script tyepe="text/javascript">    var app = new Vue({        el:"app",        data(){            return {                islogin: false            }        }    })</script>

复制代码

插值

方式一

<body>    <div id="app">        <!-- 使用 v-html 绑定原生的html代码 -->        <span v-html="rawHtml"></span>    </div></body></html><script>    var vm = new Vue({        el: "#app",        data:{            // 原生 html 代码块            rawHtml: '<span style="color:red">这里是红色的</span>',        }    })</script>

复制代码

方式二

<body>    <div id="app">        <!-- 使用JS表达式 -->        <div>{{ ok ? 'Yes' : 'No' }}</div>    </div></body></html><script>    var vm = new Vue({        el: "#app",        data:{            ok: 'sdg',        }    })</script>

复制代码

v-model 修饰符

.lazy：用于在事件之后进行同步.number：将用户的输入值转换为数值类型.trim：自动过滤用户输入的首部和尾部的空白字符，即空格

<body>    <div id="app">        事件之后进行同步:<input type="text" v-model.lazy="lazy">        <h2>{{lazy}}</h2>        <br>        <!-- typeof 用来区分数据类型，这里用来显示 number 这个变量值的类型，类似于python的type()方法 -->        把用户输入转换成数值类型:<input type="text" v-model.number="number">        <h2>{{typeof number}}</h2>        自动过滤首尾的空格:<input type="text" v-model.trim="trim">        <h2>{{trim}}</h2>    </div></body></html><script>    var vm = new Vue({        el: "#app",        data:{            lazy: '',            number: '',            trim: ''        }    })</script>