惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

A
Arctic Wolf
T
Tenable Blog
T
Troy Hunt's Blog
Exploit-DB.com RSS Feed
Exploit-DB.com RSS Feed
P
Privacy & Cybersecurity Law Blog
NISL@THU
NISL@THU
Application and Cybersecurity Blog
Application and Cybersecurity Blog
H
Hacker News: Front Page
S
Secure Thoughts
AWS News Blog
AWS News Blog
L
LINUX DO - 最新话题
D
Darknet – Hacking Tools, Hacker News & Cyber Security
M
MIT News - Artificial intelligence
T
Tor Project blog
S
Schneier on Security
PCI Perspectives
PCI Perspectives
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
美团技术团队
Google DeepMind News
Google DeepMind News
V
Visual Studio Blog
爱范儿
爱范儿
Google DeepMind News
Google DeepMind News
Cyberwarzone
Cyberwarzone
T
The Exploit Database - CXSecurity.com
罗磊的独立博客
T
Threat Research - Cisco Blogs
Recent Commits to openclaw:main
Recent Commits to openclaw:main
V
V2EX
C
CXSECURITY Database RSS Feed - CXSecurity.com
Stack Overflow Blog
Stack Overflow Blog
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
G
GRAHAM CLULEY
L
LINUX DO - 热门话题
D
Docker
J
Java Code Geeks
GbyAI
GbyAI
H
Heimdal Security Blog
The Hacker News
The Hacker News
MongoDB | Blog
MongoDB | Blog
V
Vulnerabilities – Threatpost
T
Tailwind CSS Blog
Cloudbric
Cloudbric
TaoSecurity Blog
TaoSecurity Blog
C
CERT Recently Published Vulnerability Notes
Y
Y Combinator Blog
Recorded Future
Recorded Future
Cisco Talos Blog
Cisco Talos Blog
T
Threatpost
The Register - Security
The Register - Security
Hacker News - Newest:
Hacker News - Newest: "LLM"

博客园 - bwteacher

fastadmin中前端表格中字段状态动态加载问题 mysql实用 mysql操作错误 fastadmin操作 fastadmin下的多级联动 CentOS7安装Python3.10环境 表单提交fastadmin form jdk-24及tomcat-11.0.9(解压版)安装配置 mermaid基于 JavaScript 的图表绘制工具 HbuilderX 小随笔 v-if和v-show的区别 uniapp中@tap与@click点击事件的差异 PHP常用数学函数 距离-有这么多类 bootstrap.table汇总 selectpage汇总 jQuery没有匹配到任何内容,返回什么? js数组常用方法 thinkphp控制器名称命名相关 php常见错误码 ThinkPHP的join关联查询不使用默认的表前缀 阿里云虚拟主机创建https
v-bind和v-model的区别
bwteacher · 2024-09-08 · via 博客园 - bwteacher

v-model与v-bind区别:

1、v-bind是单向绑定,用来绑定数据和属性以及表达式,只能将vue中的数据同步到页面。

2、v-model是双向绑定,不只能将vue中的数据同步到页面,而且可以将用户数据的数据赋值给vue中的属性。

3、v-bind可以给任何属性赋值,v-model只能给具备value属性的元素进行数据双向绑定。

一、v-model

v-model多在表单中使用,在表单元素上创建双向绑定,根据控件类型选择正确的方法更新元素,可以绑定text、radio、checkbox、selected

1. 绑定text

1

<input><p> {{val}} </p>

2. 绑定radio

1

2

3

<input type="radio" value="one" v-model="radioVal" />

<input type="radio" value="two" v-model="radioVal" />

<label for v-bind="radioval" />

radioval的值随着选择单选框的值,会变成one 或者 two

3. 绑定checkBox

(1)单个勾选框,最终的值为逻辑值true和false

1

2

<input type="checkbox" v-model="checkVal"/>

<label for="checkbox">{{checkVal}}</label>

(2)多个勾选框时,将值绑定到一个数组

1

2

3

4

5

6

7

8

9

10

<input type="checkbox" value="apple" v-model="checkArray"/>

<label for="checkbox">{{apple}}</label>

<input type="checkbox" value="banana" v-model="checkArray"/>

<label for="checkbox">{{banana}}</label>

<input type="checkbox" value="pear" v-model="checkArray"/>

<label for="checkbox">{{pear}}</label>

<span>{{checkArray | json}}</span>

checkArray中的值会根据是否选中进行关联变化

4. 绑定select

(1)绑定到单个select
(2)绑定多个select时,同样适用数组

5. 增加参数

(1)lazy

将输入框的input事件改为change事件,使得输入框在change事件中更新而不是input

关于change事件和input事件的区别,简单说来是:

change事件必须是在输入框失去焦点之后才会触发,而input事件可以实时监测。

(2)number

将文本框输入的值都变为数字,如果是变为数字之后是NAN,则返回原始值

(3)trim

取出输入的字符串的首尾空格


二、v-bind

1.绑定文本

直接用v-bind或者{{}}

1

2

<p v-bind="message"></p>

<p>{{message}}</p>

2.绑定属性

1

2

3

<p v-bind:src="http://...."></p>

<p v-bind:class="http://...."></p>

<p v-bind:style="http://...."></p>

3.绑定表达式

1

2

3

{{ number + 1 }}

{{ ok ? &#39;YES&#39; : &#39;NO&#39; }}

{{ message.split(&#39;&#39;).reverse().join(&#39;&#39;) }}

4.绑定html

1

<div>{{{ raw_html }}}</div>

这个时候必须要使用三个{}