vue.js官方给自己的定为是数据模板引擎，并给出了一套渲染数据的指令. v-if = “expression” : 根据表达式的真假来删除和插入元素 v-for = “item in items” : 基于一个数组渲染一个列表 v-for是Vue中的遍历（循环）指令。 (item,index) in dataList,item是遍历的每一项名称，index是每一项的索引值 索引值：{{index}}—数据：{{item}} 索引值：{{i}}–id：{{obj.id}}–name：{{obj.name}} 这是第{{count}}次循环，索引为{{index}} key是在v-for中表示唯一标识，在任何的v-for中建议都加上key。key一定要保证唯一性 v-text：会覆盖原有标签中的内容，将data中的数据作为字符串处理 v-html: 会将data作为html标签去渲染 v-clock: 占位符指令，会替换掉自己的这个占位，不会把整个元素清空 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9wgZfpEi-1591757039890)(en-resource://database/498:1)] v-bind：Vue中提供用户绑定属性的指令，也可以写成： v-model : 数据的双向绑定 , 只能用于表单元素. 一方被修改之后另一方也会同步修改
文章目录
Vue常用指令
v-if,v-show指令
v-show = “expression” : 不会每次都去删除和创建DOM元素 , 而是通过dispaly:none将元素隐藏起来v-if 例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--引入vue--> <script src="lib/vue-2.4.0.js"></script> <!--引入layui--> <script src="layui/layui.js"></script> <link rel="stylesheet" href="layui/css/layui.css"> </head> <body> <div id="app"> <span v-if="flag">显示</span> <button @click="changeData" class="layui-btn">点击</button> </div> </body> <script> let app = new Vue({ el: "#app", data: { flag: true }, methods: { changeData() { this.flag=!this.flag; } } }) </script> </html> v-show例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--引入vue--> <script src="lib/vue-2.4.0.js"></script> <!--引入layui--> <link rel="stylesheet" href="layui/css/layui.css"> </head> <body> <div id="app"> <span v-show="flag">显示</span> <button @click="changeData" class="layui-btn layui-icon layui-icon-logout">点击</button> </div> </body> <script src="layui/layui.js"></script> <script> let app = new Vue({ el: "#app", data: { flag: true }, methods: { changeData() { this.flag=!this.flag; } } }) </script> </html> v-for指令
例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script src="./lib/vue-2.4.0.js"></script> </head> <style> .red { color: red; } .size { font-size: 20px; } .back { background-color: green; } </style> <body> <div id="app"> <!-- v-for是vue中的遍历（循环）指令。(item index) in data，item是遍历的每一项名称，index是每一项的索引值 --> <!-- <p v-for="(item, index) in simpleList">索引值：{{index}}---数据：{{item}}</p> --> <!-- <p v-for="(obj, i) in objectList">索引值：{{i}}--id：{{obj.id}}--name：{{obj.name}}</p> --> <!-- <p v-for="(count, index) in 10">这是第{{count}}次循环，索引为{{index}}</p> --> <div> <input type="text" v-model="id"> <input type="text" v-model="name"> <button @click="add">添加</button> </div> <!-- key是在v-for中表示唯一标识，在任何的v-for中建议都加上key。key一定要保证唯一性 --> <p v-for="item in objectList" :key="item.id"> <input type="checkbox" name="" id=""> {{item.id}} --- {{item.name}} </p> </div> <script> var vue = new Vue({ el: '#app', data: { simpleList: [1, 2, 3, 4, 5, 6], objectList: [ { id: 1, name: '张三' }, { id: 2, name: '李四' }, { id: 3, name: '王五' }, { id: 4, name: '赵六' } ], id: '', name: '', }, methods: { add() { const obj = {id: this.id, name: this.name} this.objectList.unshift(obj) } } }) </script> </body> </html> v-text,v-html,v-clock指令
例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--引入vue--> <script src="lib/vue-2.4.0.js"></script> <!--引入layui--> <link rel="stylesheet" href="layui/css/layui.css"> </head> <body> <div id="app"> <div v-clock>{{msg1}},你好</div> <div v-text="msg">你好</div> <div v-html="msg2">你好</div> </div> </body> <script src="layui/layui.js"></script> <script> let app = new Vue({ el: "#app", data: { msg: "我是text", msg1: "我是clock", msg2: "<span style='color: red'>我是html</span>" }, }) </script> </html> 页面展示
v-bind,v-on指令
v-on：Vue提供的事件绑定指令，也可以简写成@例子
<!DOCTYPE html> <html lang="en" xmlns:v-bind="https://www.w3.org/1999/xhtml" xmlns:v-on="https://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Title</title> <!--引入vue--> <script src="lib/vue-2.4.0.js"></script> <!--引入layui--> <link rel="stylesheet" href="layui/css/layui.css"> </head> <body> <div id="app"> <a v-bind:href="msg">按钮</a> <button v-on:click="add" class="layui-btn">点击</button> </div> </body> <script src="layui/layui.js"></script> <script> layui.use(["layer"],function () { let app = new Vue({ el: "#app", data: { msg: "www.baidu.com", }, methods:{ add(){ layer.alert("123"); } } }) }) </script> </html> v-model指令
v- bind : 数据的单向绑定. 当model中数据被修改是 , bind绑定的数据会被修改. 而bind绑定的位置改变model则不会被修改<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--引入vue--> <script src="lib/vue-2.4.0.js"></script> <!--引入layui--> <link rel="stylesheet" href="layui/css/layui.css"> </head> <body> <div id="app"> <input type="text" v-model="msg"> <input type="text" :value="msg1"> </div> </body> <script src="layui/layui.js"></script> <script> layui.use(['layer'], function () { let app = new Vue({ el: "#app", data: { msg: "v-model的值", msg1: "V-bind的值" }, methods: {} }) }) </script> </html>
本网页所有视频内容由 imoviebox边看边下-网页视频下载, iurlBox网页地址收藏管理器 下载并得到。
ImovieBox网页视频下载器 下载地址: ImovieBox网页视频下载器-最新版本下载
本文章由: imapbox邮箱云存储,邮箱网盘,ImageBox 图片批量下载器,网页图片批量下载专家,网页图片批量下载器,获取到文章图片,imoviebox网页视频批量下载器,下载视频内容,为您提供.
阅读和此文章类似的: 全球云计算
官方软件产品操作指南 (170)
