v-model

最新推荐文章于 2024-04-02 11:47:32 发布
最新推荐文章于 2024-04-02 11:47:32 发布
阅读量196 收藏 1
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/scwMason/article/details/83509506
版权

基本功能：

双向数据绑定，v-bind只是单项绑定,只用在表单元素中

 

简单计算器示例：

<body>
    <div id="app">
        <input type="text" v-model="info1">
        <select name="" id="" v-model="opt">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select>
        <input type="text" v-model="info2">
        <button @click="calcu">=</button>
        <input type="text" v-model="result">
    </div>
    <script>
    var vm=new Vue({
        el:"#app",
        data:{
            info1:0,
            info2:0,
            result:0,
            opt:"+"
        },
        methods:{
           calcu(){
               var codeStr='parseInt(this.info1)'+this.opt+'parseInt(this.info2)'
               this.result=eval(codeStr)
           }
        }
    })
    </script>
</body>

scwMason
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
V-model开发流程简介
08-14
基于模型化设计（Model-Based Design, MBD）是V-Model的一种有力补充，特别是在复杂的软件开发中。MBD利用图形化的模型来表达控制逻辑，使得非程序员也能理解和构建系统。使用工具如MathWorks的MATLAB/Simulink，...
jsx-v-model-一个Babel插件，将v-model引入JSX。-Vue.js开发
05-27
用法：npm i babel-plugin-jsx-v-model -D然后在插件示例.babelrc下将jsx-v-model添加到您的.babelrc文件：{“ presets”：[“ es2015”]，“ plugins”：[“ jsx-v-model“，” transform-vue-jsx“]}代码：Vue....
自定义子组件的v-model
凯凯凯凯凯凯凯凯
09-27 678
自定义子组件的v-model
使用v-model双向绑定子组件
ihezn的博客
03-21 1091
在项目中经常会遇到子组件向父组件传递值的情况。例如封装一个ih-input组件，需要把他的值传递给父组件，通常的做法是利用$emit去触发某一事件，把值作为参数传递出去。这种做法是最基本的，但不好的就是在父组件中需要写一个方法作为事件的调用，用起来觉得繁琐！还有一个更干脆的办法就是利用v-model，在父组件中声明一个变量，直接绑定子组件，无需再去另写方法接收，如下： <template> <ih-input v-model="content" type="text">&
Vue2 子组件绑定 v-model ，实现父子组件通信
潮汐未见潮落的博客
03-25 3763
v-model可以在组件上使用以实现双向绑定。
v-model组件
qq_39105508的博客
10-11 264
今天发现有一个v-model的组件，我查了查资料发现原理是我昨天写的的子组件向父组件传值。 先上代码： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;vue v-model组件&lt;/title&gt; &lt;meta name=
表单和v-model
weixin_34410662的博客
09-05 132
Vue提供了v-model指令，用于<input> <textarea> <select>等表单类元素上双向绑定事件。 基本用法 <div id='app'> <input v-model='value' type="text"> {{value}} </div> 复制代码var app = new Vue({...
vue v-model动态生成详解
08-27
Vue V-Model动态生成详解 Vue V-Model动态生成是 Vue 框架中一种常用的数据绑定方式，但是在某些场景下，使用 V-Model 动态生成时会遇到一些问题，例如在输入框中动态绑定字段名，使用传统的方法 value 动态绑定，...
vue v-model的用法解析
01-18
v-model的基本用法 一、本节说明 前面的章节我们学习了v-bind指定，可以通过模型数据去影响视图。我们都知道VUE是支持双向数据绑定的，那么视图是如何影响数据的呢？那就要学到我们这一节的内容v-model。v-model可以...
vue中input的v-model清空操作
10-16
在Vue.js框架中，`v-model`是一个非常重要的特性，它实现了数据的双向绑定，使得视图和模型之间保持同步。然而，在某些场景下，比如需要在输入框中添加一个清空按钮，直接操作`v-model`绑定的值可能会遇到一些问题。...
v-model 和表单
Kofe_Chen的博客
11-29 280
v-model 指令用于表单类元素双向绑定数据 <div id="app"> input 和 textarea 用法： <input type="text" v-model="value"> 下面实时显示 value 的值 input 输入什么右边就显示什么 ---> {{value}} <textarea cols="30" rows="10" v-m...
Vue表单绑定v-model
愤怒的小兵
03-03 977
Vue表单绑定v-model基础用法绑定text绑定textarea绑定checkbox单个复选框多个复选框绑定radio绑定select单个select多个selectv-for渲染绑定value 基础用法 v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值，而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 dat...
html容易被忽略的一些表单属性的用法
傻丫头的专栏
02-11 939
1、readonly   只读属性，这样可以获得value值 2、disabled  失效属性 ，  不可以获得value值
用v-model 来实现两个组件数据的双向绑定
asteriaV的博客
03-09 730
下面以一个 input 组件实现的核心代码，介绍下v-model的应用。 <!--父组件--> <template> <base-input v-model="input"></base-input> </template> <script> export default { data...
详解vue中的v-model
weixin_57446003的博客
11-20 2811
vue.js 中 v-model 语法糖的使用及进阶用法
Vue实例与数据绑定 v-model
weixin_43554610的博客
11-11 155
v-model 指令在表单 、 及 元素上创建双向数据绑定 v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。 v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件： text 和 textarea 元素使用 value...
Vue组件中的v-model（深入解析）
nibabaoo的博客
04-02 2432
这两个选项在从模型引用中读取或设置值时会接收到当前的值，并且它们都应该返回一个经过处理的新值。返回的值是一个 ref。值且父组件没有为该 prop 提供任何值，会导致父组件与子组件之间不同步。在下面的示例中，父组件的。小节中学到的指定参数与事件名的技巧，我们可以在单个组件实例上创建多个。把这个 ref 绑定到一个原生 input 元素上，在提供相同的。这里是另一个例子，展示了如何在使用多个不同参数的。在某些场景下，你可能想要一个自定义组件的。的返回值，可以在子组件中访问添加到组件。
v-model的原理，以及自定义组件使用v-model
m0_47195133的博客
05-20 1371
v-model的原理，以及自定义组件使用v-model
v-model v3
最新发布
04-24
v-model是Vue.js框架中的一个指令，用于实现表单元素和Vue实例数据的双向绑定。在Vue 3中，v-model指令的使用方式有所改变。 在Vue 2中，v-model指令可以用于绑定表单元素的value属性，并且可以监听用户输入的变化。例如，可以使用v-model指令将一个input元素与Vue实例中的数据进行双向绑定，实现数据的同步更新。 而在Vue 3中，v-model指令的使用方式有所变化。现在，v-model指令只能用于自定义组件上，并且需要在组件内部通过`modelValue`和`update:modelValue`来实现双向绑定。这样做的目的是为了提高指令的灵活性和可扩展性。 总结一下，v-model是Vue.js框架中用于实现表单元素和Vue实例数据双向绑定的指令，在Vue 3中，v-model指令只能用于自定义组件上，并且需要在组件内部通过`modelValue`和`update:modelValue`来实现双向绑定。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值