如何将VueJS二级数据属性设置为输入值？
要将VueJS二级数据属性设置为输入值，可以通过v-model指令实现。v-model指令用于在表单元素上创建双向数据绑定，将表单输入的值与Vue实例的数据属性进行关联。
首先，在Vue实例的data选项中定义一个对象，该对象包含二级数据属性。例如，我们定义一个名为"formData"的对象，其中包含一个名为"subData"的二级数据属性：
data() {
return {
formData: {
subData: ''
}
}
}接下来，在模板中使用v-model指令将输入框与"formData.subData"进行绑定：
<input v-model="formData.subData" type="text">现在，当用户在输入框中输入值时，"formData.subData"的值会自动更新。同时，如果在Vue实例中修改"formData.subData"的值，输入框中的值也会随之更新。
这样，我们就成功将VueJS二级数据属性设置为输入值。
关于VueJS的更多信息和详细用法，你可以参考腾讯云的VueJS产品介绍页面：Vue.js - 渐进式JavaScript框架。
相关·内容
1回答
vuejs形式计算属性
vue.js、computed-properties
我在VueJS中有一个简单的表单，希望有一个表单字段的计算属性。在将表单提交给服务器之前，我希望计算计算属性为用户输入数据，然后将其保存为数据属性。
<form>
<div>
<h3>Revenue</h3>
<input type="text" v-model="formData.revenue">
</div>
<div>
<h3>Expenses</h3>
<input
浏览 0提问于2017-09-12得票数 1
回答已采纳
3回答
子项和父项之间的共享v-model值
javascript、vue.js、vuejs2、vue-component
我有一个和父组件一样共享v-model的组件。代码如下： Vue.component('greeting', {
template: '<input type="text" :name="name" v-on:input="updateSearch($event.target.value)"> ' ,
props: ['name'],
methods: {
updateSearch: function(value) {
this.$emit('
浏览 7提问于2019-03-15得票数 0
回答已采纳
2回答
嵌套数据的VueJS输入绑定
javascript、vue.js、vuejs2
我有一个场景，其中我在我的状态中有一些数据，在我的视图中有一些输入字段。哪个数据属性绑定到哪个输入字段由另一个数据属性决定。
下面是HTML：
<div id="app">
<input v-model="details[fields.one]">
<input v-model="details[fields.two]">
<input v-model="details[fields.three]">
</div>
这是Javascript：
App = ne
浏览 0提问于2017-12-17得票数 3
回答已采纳
2回答
提供空引用的重复输入的Vue.js监视程序
javascript、vue.js、dom
我试图在Vue.js中建立一个观察者，以便有条件地复制输入。使用value属性，我会一直体验空引用，有人会详细解释为什么会这样，这样我才能更好地理解这个问题吗？
我的HTML：
<div id="company-form">
<label>Name</label>
<input v-model="legalName" type="text"/>
<label>Name To Call</label>
<input v-model="
浏览 0提问于2019-04-25得票数 1
回答已采纳
1回答
如何从vue，js pug模板中引用数据？
node.js、express、vue.js、pug
基本上，我正在尝试从事件名称中创建一个永久链接。当我使用v-model从事件名称中获取值时，它可以工作，但是如何将转换后的固定链接放回pug中的另一个输入框中？
这是可行的：
"P {{message}}",textarea(rows="2") {{message}}
但当我尝试以下操作时：
input(value="{{message}}"),input(value={{message}}),input(value=#{{message}}),input(value=@{{message}}),input(value=#{message})
P
浏览 10提问于2018-01-23得票数 4
回答已采纳
1回答
如果字段为空且用户试图提交表单，则如何使输入字段变为红色
javascript、html、vue.js、vuejs3
当输入字段为空且用户试图提交表单而不输入值时，我试图将输入字段设置为红色。当用户试图提交表单而不使用vue.js输入任何值时，字段边框应变为红色。在填写表格之前，表格不应提交。
html
<template>
<div id="border_red">
<input id="name" name="name" v-model="name"/>
<input id="name" name="name" v-model=
浏览 1提问于2021-05-27得票数 1
回答已采纳
2回答
如何在Vue.js中动态添加HTML元素到组件
html、vue.js、append
我是vue.js新手，在此之前我使用的是jquery或js，我正在做的一个项目需要我在点击按钮时动态追加HTML元素，同时将输入值绑定到模型，类似于：
$(".button").click(function() {
$("#target").append("<input type='hidden' name='data' v-model='inputModel' value='1'/>");
});
但是我需要用Vue.js的方式。
下面是我的代码：
data() {
浏览 31提问于2019-05-24得票数 3
回答已采纳
1回答
Vue.js v-bind有一个延迟，在更改值之前表单提交。
javascript、vue.js
我正在尝试从SweetAlert模式(基本上是提示符)用输入的值更新隐藏的输入。
下面的代码不工作，表单提交，但是隐藏字段value是空。
HTML：
<input type="hidden" name="input" v-model="value">
JavaScript：
this.value = websiteId;
event.target.submit();
然而，下面的代码似乎是有效的！但是，如果我要使用普通的旧Vue.js，那么使用JavaScript就没有多大意义了。
HTML：
<input type="
浏览 3提问于2018-09-13得票数 2
回答已采纳
2回答
VueJs中的内联CSS样式行为
css、vue.js、inline
我的HTML中有一个可以将背景颜色设置为内联样式的。我尝试了两种设置样式的方法，但我不能理解一种特定的行为:如果我输入blue，两个段落都会变成蓝色。但是，如果我使用退格键，那么第2段将保持蓝色，直到输入字段为空或有另一种有效的颜色(例如:退格键从黄绿色变为黄色)，这对我来说很奇怪。另一方面，段落1具有预期的行为:如果输入不是有效的颜色，则它是未设置样式的。
我猜这与Vue将“样式对象”转换为实际css样式的方式有关。它怎麽工作?(以防万一:我对Vue.js完全陌生)
HTML：
<section id="assignment">
<input type=
浏览 6提问于2021-03-12得票数 0
2回答
如何在Vue中单击按钮时更改属性值
vue.js、attributes、element-ui
我正在使用Vue元素UI，当点击'edit‘按钮时，如何将输入框的'disable’属性从true更改为false？
var Main = {
data() {
return {
input1: 'type something here',
}
},
method: {
editvalue() {
this.$set('disable',false)
}
},
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#ap
浏览 4提问于2018-03-09得票数 1
回答已采纳
3回答
VueJs -将输入绑定到url参数
javascript、vue.js、data-binding、vue-router
我想在vue.js中将一个输入字段绑定到一个路由参数。
<input v-model="$route.params.query"/>
有可能吗？
浏览 1提问于2017-10-23得票数 8
1回答
Vue.js获得所有v-模型绑定
javascript、vue.js、vuejs2
使用Vue.js，可以将表单输入绑定到属性：
不过，我正在进行一个“动态”生成表单的项目。在这里，v模型绑定只是根据输入的名称来设置的属性。
但问题是，我不知道如何正确地获得这些v模型绑定。到目前为止，我看到的只是人们手动为绑定在Vue实例上设置一个属性：
new Vue({
el: '...',
data: {
checkedNames: []
}
})
是否可以在不手动设置数据属性的情况下获取所有v-model绑定？
当创建一个带有变化的动态表单时，一个动态的字段数，这将非常有帮助。
我想有一种选择就是使用javascript从输入中检索名称atrib
浏览 3提问于2017-04-13得票数 2
回答已采纳
2回答
Vue.js:通过"selected“将html <option>标记设置为默认值不起作用
javascript、html、vue.js、v-model、select-options
我想将其中一个可用的<option>标记设置为默认值。在<select>标记上，我使用的是v-model，并且我知道vue.js文档对此声明如下：
v-model将忽略在任何表单元素上找到的. selected属性。它将始终将Vue实例数据视为真理的来源。您应该在组件的data选项中，在JavaScript端声明初始值。
因此，我在使用variable的selected属性，直接将true传递给它，或者通过data选项中的一个变量传递。不幸的是它不起作用了。这是一个。
下面是示例代码：
HTML
<div id="app">
&l
浏览 1提问于2020-01-03得票数 2
回答已采纳
1回答
VueJS:将对象存储在数组中不能正常工作
vue.js
我想在数组中添加一些对象(名，姓)。你可以在这里看到我的代码：
new Vue({
el: "#app",
data: {
user: {
firstname: null,
lastname: null
},
formdata: {
users: []
}
},
methods: {
add() {
this.formdata.users.push(this.user);
}
}
})
<div id="app"
浏览 0提问于2020-05-15得票数 1
1回答
Vue.js在哪里存储非组件数据属性？
javascript、vuejs2、vue-component、vue.js
我正在使用Vue.js进行一个项目，我大部分时间都使用组件，但有时我只想添加一些Vue.js语法，而不完全创建一个组件。
因为我不像通常那样使用呈现，所以Vue附加到的整个HTML内容不会被覆盖，允许我在现有的sprinkle上使用一些Vue.js语法。
new Vue({
el: '#vue',
name: 'Vue root',
data: {
store
},
components: {
Example
}
});
将一些Vue.js语法添加到现有的HTML中的一个例子是:保持两个
浏览 4提问于2017-03-02得票数 1
回答已采纳
2回答
在vue.js中默认输入月份中的当前月份
vue.js
我正试图在vue.js中输入月份中的当前月份，但是我不知道如何获得这个月，请给我一个提示吗？
HTML：
<input type="month" v-model="month">
联署材料：
data()
{
return{
date: new Date().toISOString().slice(0,10)
};
},
浏览 11提问于2020-09-14得票数 0
回答已采纳
1回答
vuejs (todolist list app )中(task) prop的意外突变
javascript、node.js、vue.js、vuex、store
我有存储，其中包含状态，变异，获取方法等。状态包含如下所示的任务列表。 const state = {
tasks:[{
title: "Wake up",
completed: false
},
{
title: "Item 2",
completed: false
},
]
} Todo.vue <template>
<Task v-for="(task,key) in tasks" :id="key" :task="task
浏览 100提问于2021-10-06得票数 0
1回答
使用计算设置器时的Vue v-model问题
vue.js、input、v-model
我想创建一个输入字段，用户可以填写。问题是我不想让他们在这个字段中填入特殊字符。目前，我有以下html设置： <input class="rc-input-editing" id="bioInput" type="text" v-model="wrappedBioName"> 这个Vue.js设置(正如您所看到的，我正在尝试使用一个计算的设置程序来解决这个问题)： data () {
return {
newBioName: '',
}
浏览 17提问于2021-04-22得票数 0
回答已采纳
5回答
如果jquery更新Vuejs绑定不起作用
javascript、jquery、html、vue.js、vuejs2
HTML：
<div id="testVue">
<input id="test" v-model="testModel"/>
<button @click="clickMe()">Click me</button>
<button @click="showValue()">Show value</button>
</div>
Javascript
var testVue = new Vue({
el: '#t
浏览 0提问于2017-10-26得票数 13
回答已采纳
2回答
困惑于vuejs-模板webpack-简单的代码片段
javascript、vue.js、vue-component
我是javascript的新手。
通过阅读示例开始学习Vue.js。
但我对的代码片段感到困惑。
来自
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
我想知道为什么不能这样写代码
data: () => {
return {
msg: 'Welcome to Your Vue.js App'
}
}
我试过这两种代码，结果是一样的。
我无法从阅读Vue.js文档中理解。
请帮助我理解这个代码片段。
谢谢你花时间阅读我的
浏览 4提问于2017-03-24得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
