vue.js input框之间赋值

最新推荐文章于 2024-07-29 12:30:54 发布
最新推荐文章于 2024-07-29 12:30:54 发布
阅读量2.9w 收藏 1
点赞数
分类专栏： vue.js



demo.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Index Page</title>
</head>

<body>
  <form action="" id="demo">
    <input type="text" value="调试 vuejs 2.0" ref="input1">
    <a href="javascript:void(0)" v-on:click="test1">测试</a>
    <br>
    <span>{{ result1 }}</span>
    <br>

    <input type="text" v-model="input2">
    <a href="javascript:void(0)" v-on:click="test2">测试</a>
    <br>
    <span>{{ result2 }}</span>
  </form>

  <script src="http://cdn.bootcss.com/vue/2.0.3/vue.min.js"></script>
  <script type="text/javascript" src="demo.js"></script>
</body>

</html>

demo.js

new Vue({
    el: "#demo",

    data: {
        result1: null,
        result2: null,
        input2: ""
    },

   

    methods: {
        test1: function () {
            this.result1 = this.$refs.input1.value + " 成功!";
        },

        test2: function () {
            this.result2 = this.input2 + " 成功!";
        }
    }
})

demo.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Index Page</title>
</head>

<body>
  <form action="" id="demo">
    <input type="text" value="调试 vuejs 2.0" ref="input1">
    <a href="javascript:void(0)" v-on:click="test1">测试</a>
    <br>
    <span>{{ result1 }}</span>
    <br>

    <input type="text" v-model="input2">
    <a href="javascript:void(0)" v-on:click="test2">测试</a>
    <br>
    <span>{{ result2 }}</span>
  </form>

  <script src="http://cdn.bootcss.com/vue/2.0.3/vue.min.js"></script>
  <script type="text/javascript" src="demo.js"></script>
</body>

</html>
疯狂的妖妖
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
vue.js input框之间赋值方法
10-18
今天小编就为大家分享一篇vue.js input框之间赋值方法具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue给input框属性赋值的方法
qq_46034741的博客
04-11 6105
​指令实现双向数据绑定，让输入框的值与组件的数据属性保持同步。这里是一个简单的例子。​与输入框的值进行了双向绑定。现在，当用户在输入框中输入内容时，在这个例子中，我们创建了一个Vue实例，并在。然后，在HTML中使用。​会自动更新，同时显示在。​属性中定义了一个名为。在Vue中，可以使用。
input自定义指令，限制输入数字，字符串，数字，字母等规则
最新发布
six6de6的博客
07-29 732
在你的 Vue 组件中，你可以使用这个自定义指令来控制输入框的行为。以下是如何在模板中使用这个指令的详细说明。
Web前端-Vue中给input框赋值
热门推荐
MinggeQingchun的博客
12-14 1万+
Input 输入框 通过鼠标或键盘输入字符 Input 为受控组件，它总会显示 Vue 绑定值。 通常情况下，应当处理input事件，并更新组件的绑定值（或使用v-model）。否则，输入框内显示的值将不会改变。 https://element.eleme.cn/#/zh-CN/component/input https://cn.vuejs.org/v2/guide/reactivity.html 如下： <el-input v-model="student.name">&..
vue3 elementui 如何给嵌在el-form的el-input斌值？
倚楼听风雨的博客
11-23 646
在Vue 3和Element UI中，要给嵌在。
vue触屏项目 使用 虚拟键盘组件，通过js给el-input value赋值，v-model绑定值不同步问题（已修改）
蓝胖子的博客
08-24 3224
vue触屏项目 使用 虚拟键盘组件，通过js给el-input value赋值，v-model绑定值不同步问题（已修改）
Vue.js+Layer表格数据绑定与实现更新的实例
10-18
首先，Vue.js是一个用于构建用户界面的渐进式JavaScript框架。它通过数据驱动视图，让开发者可以更方便地进行DOM操作和状态管理。Vue.js的核心思想之一就是数据绑定，即通过声明式的方式在模板中绑定数据，这样当...
vue.js实现简单的计算器功能
10-15
Vue.js 的 `v-model` 指令在这里被用来双向绑定数据，使得视图与模型之间保持同步。 接着，我们来看 JavaScript 部分。Vue.js 实例 (`var vm = new Vue({ ... })`) 通过 `el` 属性指定挂载的 DOM 节点，`data` 对象...
vue.js选中动态绑定的radio的指定项
10-19
为了实现这一功能，我们需要理解Vue.js中v-model指令的用法，以及如何通过JavaScript代码动态控制表单元素的状态。 首先，了解Vue.js中v-model的基本概念。v-model在表单元素上创建双向数据绑定。对于单选按钮...
vue.js做一个简单的编辑菜谱功能
10-18
Vue.js是一个轻量级的前端JavaScript库，它提供了一套声明式的编程方式，使得构建用户界面变得更加简单。在这个示例中，我们将实现以下主要功能： 1. **获取菜品数据**： 菜谱编辑功能的第一步是获取所有可用的菜...
vue input 实现边输入边赋值
qq_42550285的博客
09-23 2198
<el-input v-model="temp.version" @input="changeVersion" style="width: 300px" /> 1.只需要在input元素中加入： @input="changeVersion" 2.定义响应方法 methods:{ changeVersion(newVersion){ console.log('newVers...
Vue给Input赋值
皇位无忧的工作室
08-19 7487
Input 控件示意如下 <el-input v-model="form.example" placeholder="自动计算年龄" :readonly="true"/> 新手做法 <script> this.form.example = 要赋的值; </script> 有效方法 <script> this.$set(this.form,'example',要赋的值); </script> ...
el-input输入框赋值
weixin_43778272的博客
01-04 824
赋值后也可以手动输入值，不影响改变。
vue项目，动态计算俩个input的值并且赋值给另外的input
weixin_44885243的博客
12-07 5064
新增弹出对话框代码: <!-- 添加或修改线路起讫里程对话框 --> <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body> <el-form ref="form" :model="form" :rules="rules" label-width="80px"> <el-form-item label="线名" prop="
利用JS响应式修改vue实现页面的input赋值
weixin_47949352的博客
03-10 2603
拉起登录页面时，自动将用户帐号和密码填入，然后自动点击登录。
解决vue + elementui el-table中input 赋值问题以及批量赋值问题
qq_28917403的博客
06-30 3193
问题贴出来 调整代码： <el-table-column label="实结点位" align="center" width="140"> <template slot-scope="scope"> <div class="display"> <el-input v-model="scope.row.chargesPercentage" clearable size="small" @blur=".
vue +elementui 给 input 动态赋值
虚无缥缈
07-06 3243
vue+ elementui 动态给input赋值
vue3+element 封装el-input
丽啊丽宝的博客
03-29 2426
search组件 <template> <div class="contain"> <el-input class="input" v-model="value" @change="onInput" :placeholder="placeholder"></el-input> </div> </template> <script> import { defineComponent, re
通过js给el-input value赋值，v-model绑定值不同步问题
weixin_43861311的博客
10-26 7036
1.在页面上通过点击右侧，直接给input赋值，由于input不是固定是可新增的，结构是循环出来的，没想到其他好的方式可以确认是修改的哪个参数，因此直接js操作 2,通过blur事件获取到event template： <el-input v-model="item.value" size="mini" @blur="handleInputBlur" ></el-inp.
vue.js input 输入实时转千分位 并默认补零
05-26
可以通过在 input 上绑定一个事件监听函数，在该函数中对输入的值进行处理，实时转化为千分位并补零。具体实现如下： ```html <template> <div> <input type="text" v-model="inputValue" @input="handleInput"> </div> </template> <script> export default { data() { return { inputValue: '' } }, methods: { handleInput() { // 将输入的字符串转化为数字 let num = parseFloat(this.inputValue.replace(/,/g, '')) // 如果输入的不是数字，则清空输入框 if (isNaN(num)) { this.inputValue = '' return } // 转化为千分位，并补零 this.inputValue = num.toFixed(2).replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, '$&,') } } } </script> ``` 在上面的代码中，我们首先通过 `v-model` 指令将输入框的值绑定到 `inputValue` 属性上。然后在 `@input` 事件中，我们将输入的字符串转化为数字，如果输入的不是数字，则清空输入框。接着，我们将数字转化为千分位，并补零，最后将处理后的值赋值给 `inputValue`，从而实现了实时转化为千分位并补零的效果。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值