vue.js怎么给textarea赋值

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue.js怎么给textarea赋值相关的知识,希望对你有一定的参考价值。

vue给textarea赋值可以使用v-model。示例如下:

HTML:

<div id="app">
    <textarea v-model="str"></textarea>
</div>

JavaScript(VUE):

var vm = new Vue(
    el: \'#app\',
    data: 
        str: \'这是测试内容\'
    
);

初始化运行结果:

在控制台执行 vm.str="这是变更的内容"; 后的运行结果:

你可以在js代码的任意位置来变更已绑定的textarea的值。

参考技术A

textarea标签是成对出现的,以<textarea>开 始,以</textarea>结束

属性:

Common -- 一般属性

cols -- 多行输入域的列数

rows -- 多行输入域的行数

alt -- 代表表单的提示文字,当鼠标停留时

accesskey -- 表单的快捷键访问方式

disabled -- 输入域无法获得焦点,无法选择,以灰色显示,在表单中不起任何作用

readonly -- 输入域可以选择,但是无法修改

tabindex -- 输入域,使用"tab"键的遍历顺序

引用网址:http://www.dreamdu.com/xhtml/tag_textarea/

没见value属性,但实际还可用,赋值时用innerText、innerHTML、value都可以,如下:

<html>

<head></head>

<script type="text/javascript">

function changeTextArea()

document.getElementByIdx_x("myTextArea").innerText=document.getElementByIdx_x("myTextArea").innerText+"\\ninnerText is ok!";

document.getElementByIdx_x("myTextArea").innerHTML=document.getElementByIdx_x("myTextArea").innerText+"\\ninnerHTML is ok!";

document.getElementByIdx_x("myTextArea").value=document.getElementByIdx_x("myTextArea").innerText+"\\nvalue is ok!";

</script>

<body>

<textarea name= "myTextArea" cols= "80 " rows= "10 ">原始值</textarea>

<input type="button" value="按钮" onclick="changeTextArea()"/>

</body>

</html>

在vue.js;用true或false的textarea属性'readonly'切换是没用的;

我想做的是:

  1. dblclick textarea时可以编辑textarea;
  2. 模糊时无法编辑textarea;

但是现在,无论我使用'readonly'属性的状态切换它都是无用的;

codesandbox here

答案
<input
    v-model="textVal"
    :rows="rows"
    :readonly="status"
    :autoHeight="autoHeight"
    class="textMsg"
    @input="inputing"
    @blur="blur"
  ></input>
  <button @click="dblclick">Test</button>


您好,我看了您的示例,代码没有问题,意外影响的原因是ondbclick事件和onblur事件之间的冲突。好吧,对不起,我无法解释这一点。但我的解决方案是在按钮上添加一个click事件来更改文本字段的值。其他人没有改变。

检查信息是事件的优先级。所以你可以看看这个。

以上是关于vue.js怎么给textarea赋值的主要内容,如果未能解决你的问题,请参考以下文章

vue.js 结构赋值--数组

(Vue.js) V 模型数组。运行困难功能

flask jinja2怎么给textarea 赋值

flask jinja2怎么给textarea 赋值

vue.js 结构赋值--对象

为啥 vue.js 的 data 中定义的变量不能赋值给对象?