v-bind和v-model的区别

时间：2024-09-08 15:40:23浏览次数：7

标签：39 checkbox 区别 bind 绑定 &# model

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

<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）多个勾选框时，将值绑定到一个数组

<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.绑定属性

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

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

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

3.绑定表达式

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

4.绑定html

1	`<div>{{{ raw_html }}}</div>`

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

标签：39,checkbox,区别,bind,绑定,&#,model
From： https://www.cnblogs.com/bwteacher/p/18402891

Mac系统 .zprofile、.zshrc 和 .bash_profile 区别及作用
在macOS中，.zprofile、.zshrc和.bash_profile是三个重要的配置文件，分别用于不同的shell和场景。下面详细介绍它们的作用和区别：1. .zprofile作用：.zprofile 主要用于Zshshell的全局配置。它在每次用户登录时都会被读取。通常用于设置环境变量、路径和其他全局配......
Bash中$10 和 ${10}的区别
#!/bin/bashfunWithParam(){echo"第一个参数为$1!"echo"第二个参数为$2!"echo"第十个参数为$10!"echo"第十个参数为${10}!"echo"第十一个参数为${11}!"echo"参数总数有$#个!"echo"作为一个字符......
A Comprehensive Survey of Accelerated Generation Techniques in Large Language Mo
本文是LLM系列文章，针对《AComprehensiveSurveyofAcceleratedGenerationTechniquesinLargeLanguageModels》的翻译。大型语言模型中加速生成技术的全面调查摘要1引言2推测解码3早退4非自回归模型5讨论和局限性6结论摘要尽管在大型语言模型（L......
A COMPREHENSIVE SURVEY ON EVALUATING LARGE LANGUAGE MODEL APPLICATIONS IN THE ME
本文是LLM系列文章，针对《ACOMPREHENSIVESURVEYONEVALUATINGLARGELANGUAGEMODELAPPLICATIONSINTHEMEDICALINDUSTRY》的翻译。关于评估医疗行业中大型语言模型应用程序的综合调查摘要1引言和背景2综述的分类和结构3医学领域LLM应用评估的现状4挑战......
v-if和v-show的区别
v-if和v-show是Vue.js中常用的指令，用于根据条件来控制元素的显示和隐藏。它们的区别主要体现在以下几个方面：渲染方式：v-if是基于条件进行的“惰性渲染”，即只有在条件为真时才会渲染对应的组件或元素，而在条件为假时会直接移除对应的组件或元素。这意味着在条件为假时，相关的组件或......
Calico和flannel区别
Calico和Flannel是Kubernetes中常用的网络插件（CNI插件），它们在设计理念、功能和使用场景上有一些显著的区别。以下是它们的主要区别：1.网络架构Calico：使用了路由（Layer3）模型，支持IP路由。采用了BGP（边界网关协议）进行网络路由，这使得它能够在大规模集群中表现出色。支持多种网络......
大模型api实战-open.bigmodel.cn
注册登录后在个人中心的APIkeys中找到并复制推荐使用SDK，在虚拟环境安装pipinstallzhipuai编辑python代码访问API获取响应fromzhipuaiimportZhipuAIclient=ZhipuAI(api_key="0c6df39e71b0a7340f221fddc1ddb711.au66Z02fXWc7SJBB")response=client.chat.completi......
import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from ‘axios
在 importaxios,{AxiosInstance,AxiosRequestConfig,AxiosResponse}from'axios'; 中：不加花括号（只导入axios）： -你只能使用默认导入的 axios 对象本身来进行HTTP请求，例如 axios.get('/api/endpoint') 。-没有导入特定的类型定义，在使用相关对象......
deployment和statefulset区别
在Kubernetes中，Deployment和StatefulSet都是用于管理Pod的控制器，但它们适用于不同的场景和需求。以下是二者的主要区别：1.用例Deployment：主要用于无状态应用（statelessapplications），如Web服务器、API服务等。适合需要快速扩展和更新的场景。StatefulSet：主要用于有状态......
Camunda Modeler流程设计器
1、介绍任何可执行流程都需要预先设计和配置业务流程模型和BPMN图，BPMN图可以让使用者更容易理解流程的结构，CamundaModeler是一个可视化设计和实现BPMN图表的工具。下面是官方使用文档：1、Modeler中绘制BPMN介绍2、桌面版Modeler使用介绍2、相关概念可以将BPMN的绘制类比于我......

v-bind和v-model的区别

一、v-model

2. 绑定radio

二、v-bind

相关文章

赞助商

阅读排行