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的值。
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'切换是没用的;
我想做的是:
- dblclick textarea时可以编辑textarea;
- 模糊时无法编辑textarea;
但是现在,无论我使用'readonly'属性的状态切换它都是无用的;
<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赋值的主要内容,如果未能解决你的问题,请参考以下文章