JavaScript vue 获取文本框的值 vue怎么获取文本框的值

转载

mob6454cc623087 2023-10-12 12:01:49

文章标签 vue获取文本框内容 Vue vue.js html 文章分类 JavaScript 前端开发

插值：{{}}
指令：
v-text 文本写入html标签
引入vue文件 或者网址
 <script src=".vue-v2.6.10.js"></script>
</head>
<body>
 <div id="div">
 <h1 v-text="msg"></h1>
 </div>
</body>
<script>
 var hh = new Vue({
 el: "#div",
 data: {
 msg: "<h3>此木土狗</h3>"
 }
 })
</script>
v-html 解析标签 添加内容 不建议使用（不使用）
引入vue地址 或者网址
 <script src="./vue-v2.6.10.js"></script>
</head>
<body>
 <div id="div">
 <p v-html="msg"></p>
 </div>
</body>
<script>
 var add = new Vue({
 el: "#div",
 data: {
 msg: "<h1>张三</h1>"
 }
 })
插值表达式：
 <script src="./vue-v2.6.10.js"></script>
</head>
<body>
 <div id="div">
 <h2>{{cc}}</h2>
 <p>{{ys+4}}</p>
 <!-- 三元运算 -->
 <i>{{ys>10?"大":"小"}}</i>
 <h3>{{obj.age+1}}</h3>
 <h6>{{xb[0]}}</h6>
 <h1>{{fun()}}</h1>
 </div>
</body>
<script>
 var dv = new Vue({
 el: "#div",
 data: {
 cc: "此木土狗",
 ys: "6",
 obj: {
 name: "晓明",
 age: 24,
 },
 xb: ["", "晓", "明", ],
 fun: function() {
 return "真帅！！！！"
 }
 }
 })
</script>
v-bind (可缩写成  ：) 属性绑定 控制style标签
-没办法再html里写 所有有-的属性 -后面字母大写 （font-size）===（fontSize）
 <script src=".vue-v2.6.10.js"></script>
</head>
<body>
 <div id="div">
 <img v-bind:src="img" alt="">
 <a :href="lj">删除</a>
 <p :style="{color:ys1,fontSize:Z+'px'}">啊实打实打算大苏打大大大</p>
 <div v-bind:style="[ys,z]">十大大苏打实打实的啊大苏打</div>
 <div :style="[ys1,z]">十大大苏打实打实的啊大苏打</div>
 </div>
</body>
<script>
 var add = new Vue({
 el: "#div",
 data: {
 img: "./h-qb.jpg",
 zt: {
 color: "pink"
 },
 ys: {
 background: "red",
 color: "yellow"
 },
 ys1: {
 background: "green"
 },
 lj: "&?del.php",
 z: {
 fontSize: "26px"
 },
 Z: 36,
 }
 })
</script>
v-bind 单向绑定
· .prop - 被用于绑定 DOM 属性 (property)。(差别在哪里？)
· .camel - (2.1.0+) 将 kebab-case 特性名转换为 camelCase. (从 2.1.0 开始支持)
· .sync (2.3.0+) 语法糖，会扩展成一个更新父组件绑定值的 v-on 侦听器。
 <script src=".vue-v2.6.10.js"></script>
</head>
<style>
</style>
<body>
 <div id="div">
 <h1 :style="{background:axb}">{{msg}}</h1>
 <p v-text="axb"></p>
 </div>
</body>
<script>
 var a = new Vue({
 el: "div",
 data: {
 msg: "晓明",
 axb: "green"
 }
 })
</script>
v-model 双向绑定 
from表单双向绑定
· .lazy
· .number
· .trim
 <script src=".vue-v2.6.10.js"></script>
</head>
<body>
 <div id="div">
 <form action="" method="POST">
 <input type="text" name="" id="" v-model.lazy="mag">
 <input type="button" value="提交">
 </form>
 <p>{{mag}}</p>
 </div>
</body>
<script>
 var a = new Vue({
 el: "div",
 data: {
 mag: null
 }
 })
</script>
v-on 事件绑定 可以缩写成（@）后面直接写事件名称
· .stop - 调用 event.stopPropagation()。
· .prevent - 调用 event.preventDefault()。
· .capture - 添加事件侦听器时使用 capture 模式。
· .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
· .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
· .native - 监听组件根元素的原生事件。
· .once - 只触发一次回调。
· .left - (2.2.0) 只当点击鼠标左键时触发。
· .right - (2.2.0) 只当点击鼠标右键时触发。
· .middle - (2.2.0) 只当点击鼠标中键时触发。
· .passive - (2.3.0) 以 { passive: true } 模式添加侦听器
 <script src=".vue-v2.6.10.js"></script>
</head>
<body>
 <div id="div">
 <input type="button" value="按钮" @click="pp">
 <input type="button" value="按钮" @click.ctrl="oo">
 </div>
</body>
<script>
 var a = new Vue({
 el: "#div",
 data: {
 pp: function() {
 alert(33)
 },
 oo() {
 alert(66)
 }
 }
 })
v-show 展示或隐藏 如果是隐藏点击展示如果是展示点击隐藏  css样式显示隐藏
ture显示 false隐藏
 <script src="./vue-v2.6.10.js"></script>
</head>
<body>
 <div id="div">
 <input type="button" value="按钮" @click="show">
 <p v-show="f">{{msg}}</p>
 </div>
</body>
<script>
 var app = new Vue({
 el: '#div',
 data: {
 msg: "真帅！！！！",
 f: true
 },
 methods: {
 show() {
 this.f = !this.f;
 }
 }
 })
</script>
v-if , v-else , v-else-if （判断）
 <script src=".vue-v2.6.10.js"></script>
</head>
<body>
 <div id="div">
 <input type="text" name="" id="" v-model.number="mag">
 <p v-if="mag<10">垃圾</p>
 <p v-else-if="mag>10 && mag<60">还行</p>
 <p v-else>不错</p>
 </div>
</body>
<script>
 var a = new Vue({
 el: "div",
 data: {
 mag: 0
 }
 })
</script>
v-for for循环 里面写（值，下标）内容页面写{{值、或者下标}}-------{{值、或者下标}}
v-for （值，下标） in 对象
 <script src=".vue-v2.6.10.js"></script>
</head>
<body>
 <div id="div">
 <ul>
 <li v-for="(q,v) in obj">{{q}}-------{{v}}</li>
 </ul>
 </div>
</body>
<script>
 var a = new Vue({
 el: "div",
 data: {
 obj: {
 id: 1,
 name: "晓明"
 }
 }
 })
</script>
Placeholder 占位符
placeholder 文本框里灰色的字体
书写格式placeholder=”” 输入你向再文本框显示的灰色字体 输入文字后灰色字体消失
label 标签 显示内容
<lavel>内容<lavel>
methods 事件
methods{}书写格式
循环数组 接受一个函数
这个是删除大于10的数
var arr = [1,3,56,45,8,9,1,21,4,545,6]
var a=arr.filter(function(v){
 if(v>10){
 return true;
}else{
 return false;
}
})
methods 计算属性每次都会计算
 <script src="./vue.js"></script>
</head>
<body>
 <div id="div">
 <input type="text" name="" id="" v-model="xing">
 <input type="text" name="" id="" v-model="ming"> {{mingzi()}} {{mingzi()}} {{mingzi()}} {{mingzi()}} {{mingzi()}} {{mingzi()}} {{mingzi()}} {{mingzi()}} {{mingzi()}} {{mingzi()}} {{mingzi()}} {{mingzi()}} {{mingzi()}} {{mingzi()}} {{mingzi()}}
 {{mingzi()}} {{mingzi()}} {{mingzi()}} {{mingzi()}} {{mingzi()}} {{mingzi()}} {{mingzi()}} {{mingzi()}} {{mingzi()}} {{mingzi()}} {{mingzi()}} {{mingzi()}}
 </div>
</body>
<script>
 var a = new Vue({
 el: "#div",
 data: {
 xing: "李",
 ming: "四",
 },
 methods: {
 mingzi() {
 return this.xing + this.ming + Date.now();
 }
 }
 })
</script>
computed 计算属性 只计算第一次计算出来的数值后面的不会在计算
 <script src="./vue.js"></script>
</head>
<body>
 <div id="div">
 <input type="text" name="" id="" v-model="xing">
 <input type="text" name="" id="" v-model="ming"> {{mingzi}} {{mingzi}} {{mingzi}} {{mingzi}} {{mingzi}} {{mingzi}} {{mingzi}} {{mingzi}} {{mingzi}} {{mingzi}} {{mingzi}} {{mingzi}} {{mingzi}} {{mingzi}} {{mingzi}} {{mingzi}} {{mingzi}} {{mingzi}}
 {{mingzi}} {{mingzi}} {{mingzi}} {{mingzi}} {{mingzi}} {{mingzi}} {{mingzi}} {{mingzi}} {{mingzi}}
 </div>
</body>
<script>
 var a = new Vue({
 el: "#div",
 data: {
 xing: "李",
 ming: "四",
 },
 computed: {
 mingzi() {
 return this.xing + this.ming + Date.now();
 }
 }
 })
</script>
侦听器 watch 侦听的是数据的变化
侦听器的属性名和data里的的名是一样的
 <script src="./vue.js"></script>
</head>
<body>
 <div id="div">
 <input type="text" name="" id="" v-model="xing">
 <input type="text" name="" id="" v-model="ming"> {{mingzi}}
 </div>
</body>
<script>
 var a = new Vue({
 el: "#div",
 data: {
 xing: "",
 ming: "",
 mingzi: "",
 },
 methods: {
 },
 watch: {
 xing(newval, oldval) {
 // console.log(newval);
 // console.log(oldval);
 this.mingzi = oldval + this.ming
 },
 ming() {
 },
 }
 })
</script>
ref 获取dom对象 获取想要的内容
 <script src="./vue.js"></script>
</head>
<body>
 <div id="div">
 <input type="button" value="按钮" @click="dj">
 <p ref="p1">{{sz}}</p>
 <p v-text="sz1" ref="p2"></p>
 </div>
</body>
<script>
 var a = new Vue({
 el: "#div",
 data: {
 sz: "123",
 sz1: "456",
 },
 methods: {
 dj() {
 // alert(3)
 alert(document.getElementsByTagName("p")[1].innerHTML);
 }
 }
 })
</script>

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。