Vue框架之双向绑定事件
Vue框架之双向绑定事件
首先介绍下Vue框架的语法 vue通过 {{temp}} 来渲染变量 {{count+100}} # 求和 v-text # 为标签插入text文本 v-html # 为标签插入html v-show # 根据布尔值判断,显示与隐藏, v-if # if判断语句,根据真假值来显示对应的内容 v-else # 与v-if连用 v-for # for循环,如果对象是列表的话,可以显示其索引,字典默认显示value值 v-model #这是一个双向绑定事件(白话:就是我这边输入,就可以直接获取到值,数据修改值后我页面可以立即变更,中间省去很多的查找标签的内容)
注意事项:在Vue中的this代表的是window,在前端定义的变量以及函数都是定义在window中。
Vue框架双向绑定实例(input输入页面实时显示)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js"></script> </head> <body> <div id="myapp"> 首先要先定义一个div标签也就是说要对操作的标签设置一个父标签 <input type="text" v-model="message"> 绑定一个双向事件 <p>{{ message }}</p> 这个是和绑定的双向事件同名 </div> <script> new Vue({ 通过new定义一个Vue的方法 el:'#myapp', 使用el 找到设置的标签,这个方法只支持id属性 data:{ data 是一个json数据 message:'' 找到定义的变量然后设置成一个空字符串,这个要和绑定的那个名称一样 } }) </script> </body> </html>
Vue框架双向绑定实例(下拉选择内容然后点击绑定的button按钮页面显示选择的内容)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--<script src="https://cdn.jsdelivr.net/npm/vue"></script>--> <script src="vue.js"></script> </head> <body> <div id="int"> <input type="text" v-model="message"> <!--v-model是实现双向绑定--> <p>{{message}}</p> <input type="button" value="clicke me" v-on:click="butText" > <select v-model="sel"> <option value="111">111</option> <option value="222">2222</option> <option value="333">3333</option> <option value="444">4444</option> </select> </div> <script> var na = new Vue({ el:'#int', data:{ message:'', sel:'111' }, methods:{ butText:function () { alert(this.sel) } } }); </script> </body> </html>