Vue——属性指令、style和class、条件渲染、列表渲染、事件处理、数据双向绑定、过滤案例
2023-06-03 10:25:18 作者：admin
vm对象
<body><div id="app"> <h1>{{name}}</h1> <button @click="handleClick">点我</button></div></body><ｓｃｒｉｐｔ> // 1 写在data或method中的属性或方法，从vm中直接可以点出来 // 2 method的函数中，如果想使用data或methods中的属性，直接this点名字就可以了 let vm = new Vue({ el: '#app', data: { name: 'xxx', age: 19, }, methods: { handleClick() { console.log(this) this.handleClick1() }, handleClick1() { console.log(this) this.name = '彭于晏' } } })</ｓｃｒｉｐｔ>函数传参
<body><div id="app"> <h1>函数，可以多传参数，也可以少传参数，都不会报错</h1> <button @click="handleClick('xxx')">点我</button> <h1>事件对象，调用函数，不传参数，会把当前事件对象，传入，可以不接收，也可以接收</h1> <button @click="handleClick2">点我2</button> <br> <button @click="handleClick3('xxx',$event)">点我3</button></div></body><ｓｃｒｉｐｔ> let vm = new Vue({ el: '#app', data: {}, methods: { handleClick(name, age) { console.log(name, age) }, handleClick2(event) { console.log(event) }, handleClick3(name, event) { console.log(name) console.log(event) } }, })</ｓｃｒｉｐｔ>属性指令
// 标签上 name id class src href ,height 属性// 如果这样，name='xx' 就写死了，我们想动态的绑定变量，变量变化，属性的值也变化// v-bind:属性名='变量' 可以简写成 :属性名='变量'<body><div id="app"> <hr> <button @click="handleClick">点我变大</button> <img :src="url" alt="" :height="h" width="w"></div></body><ｓｃｒｉｐｔ> let vm = new Vue({ el: '#app', data: { url: 'http://www.xiachao.cn/img/20230603/zhu3ffmpfpt.jpg' h: '200px', w: '200px' }, methods: { handleClick() { this.h = '400px' this.w = '400px' }, } })</ｓｃｒｉｐｔ>style和class
// style 和 class也是属性，可以使用属性指令 :class= :style=// 但是他们比较特殊，单独再讲 <style> .size { font-size: 60px; } .red { background-color: red; } .yellow { background-color: yellow; } </style></head><body><div id="app"> <h1>class的使用:字符串，数组，对象</h1> <button @click="handleClick">点我变样式</button> <br> <div :class="class_arr"> 我是div </div> <h1>style的使用:字符串，数组，对象</h1> <br> <div :style="style_obj"> 我是div </div></div></body><ｓｃｒｉｐｔ> let vm = new Vue({ el: '#app', data: { // class 推荐使用 数组方式 // class 绑定的变量，类型可以是 字符串，数组，对象 // class_str: 'size', // vm.class_str='size red' class_arr:['red'], // 给该变量，追加值，class变化，页面会发生变化：vm.class_arr.push('size') // class_obj:{size:true,red:false} // 对象的用法，必须先提前设置，后期通过修改true或false控制类 // class_obj:{size:true}, // 但是不能往对象中放之前不存在的值，放不存在的值，没有响应式 // style 推荐使用 对象形式 // style_str:'font-size:80px;background-color:green', // vm.style_str='background-color: red' // style_arr: [{'font-size':'60px'}] // vm.style_arr.push({'background-color':'red'}) // style_obj:{'font-size':'60px','backend-color':'green'} style_obj:{fontSize:'60px',color:'green'},// 省略key值的引号后，要变成驼峰形式 // 有以下三种写法 Vue.set(this.style_obj,'color','red')或者this.style_obj['color'] = 'pink'或者this.style_obj.fontSize = '20px' }, methods: { handleClick() { // this.class_obj.yellow = true // 直接放，没有响应式 Vue.set(this.style_obj,'color','red') // 这样才有响应式 } } })</ｓｃｒｉｐｔ>条件渲染
<body><div id="app"> <div v-if="score>90&&score<=100">优秀</div> <div v-else-if="score>80&&score<=90">良好</div> <div v-else-if="score>60&&score<=80">及格</div> <div v-else>不及格</div></div></body><ｓｃｒｉｐｔ> let vm = new Vue({ el:'#app', data:{ score:92 }, })</ｓｃｒｉｐｔ>列表渲染
// 循环渲染一些数据，比如购物车的数据// v-for：循环字符串，数组，数字，对象// 有购物车数据，循环显示在页面中// 借助于bootstrap + Vue<div id="app"> <div class="container-fluid"> <div class="row"> <div class="col-md-6 col-md-offset-3"> <h1 class="text-center">购物车</h1> <div class="pull-right"> <button class="btn btn-danger" @click="handleClick">加载购物车</button> </div> <table class="table table-striped"> <thead> <tr> <th>id号</th> <th>商品名</th> <th>商品价值</th> <th>商品数量</th> </tr> </thead> <tbody> <tr v-for="good in good_list"> <th>{{good.id}}</th> <td>{{good.name}}</td> <td>{{good.price}}</td> <td>{{good.count}}</td> </tr> </tbody> </table> </div> </div> </div></div></body><ｓｃｒｉｐｔ> let vm = new Vue({ el:'#app', data:{ good_list:[], }, methods:{ handleClick(){ this.good_list = [ {'id': 1, 'name': '小汽车', 'count': 2, 'price': 100000}, {'id': 2, 'name': '脸盆', 'count': 1, 'price': 23}, {'id': 3, 'name': '方便面', 'count': 3, 'price': 6}, {'id': 4, 'name': '钢笔', 'count': 4, 'price': 5}, ] } } })</ｓｃｒｉｐｔ>v-for循环其他类型
// 数字 字符串 数组 对象// 看到别人写v-for时，在标签上都会加一个 key 属性，目的是为了提高虚拟dom的替换效率<el-carousel-item v-for="item in 4" :key="item">// key的值必须唯一 如果不唯一就报错 ###### 以后如果数据变了，页面没有发生变化#####Vue.set(对象, key, value)Vue.set(数组, 索引, 值) <body><div id="app"> <h1>循环数字</h1> <ul> <li v-for="(value,index) in number">{{value}}-----------{{index}}</li> </ul> <h1>循环字符串</h1> <ul> <li v-for="(value,index) in str">{{value}}-----------{{index}}</li> </ul> <h1>循环数组</h1> <ul> <li v-for="(value,index) in arr">{{value}}------------{{index}}</li> </ul> <h1>循环对象(相对于python key和value是反的)</h1> <ul> <li v-for="(value,index) in obj">{{value}}------------{{index}}</li> </ul></div></body><ｓｃｒｉｐｔ> let vm = new Vue({ el:'#app', data:{ number:10, str:'XxMa', arr:[11,22,33,44,55], obj:{name:'xxx',age: 19,gender:'男'} } })</ｓｃｒｉｐｔ>双向数据绑定 v-model
// 数据双向绑定---》只有input标签---》v-model 做双向数据绑定// 咱们之前写的，其实都是数据的单向绑定修改js的值，页面变了<body><div id="app"> <h1>双向数据绑定</h1> <p>用户名<input type="text" v-model="username"></p> <p>用户名<input type="password" v-model="password"></p> <p> <button @click="handleSubmit">登录</button> </p></div></body><ｓｃｒｉｐｔ> let vm = new Vue({ el:'#app', data:{ username:'xxx', password:'123', }, methods:{ handleSubmit(){ console.log(this.username) console.log(this.password) } } })</ｓｃｒｉｐｔ>事件处理
// 事件指令click:点击事件// input标签的事件input:只要输入内容，就会触发change：只要输入框发生变化，就会触发blur：只要失去焦点，就会触发<body><div id="app"> <h1>input事件</h1> <input type="text" @input="handleInput" v-model="username">-----{{username}} <h1>change事件</h1> <input type="text" @change="handleChange" v-model="username1">------{{username1}} <h1>blur事件</h1> <input type="text" @blur="handleBlur" v-model="username2">-------{{username2}}</div></body><ｓｃｒｉｐｔ> let vm = new Vue({ el:'#app', data:{ username:'xxx', username1:'yyy', username2:'zzz' }, methods:{ handleInput(){ console.log(this.username) }, handleChange(){ console.log(this.username1) }, handleBlur(){ console.log(this.username2) } } })</ｓｃｒｉｐｔ>过滤案例(filter、indexOf)
<body><div id="app"> <input type="text" v-model="search" @input="handleInput"> <hr> <ul> <li v-for="item in new_dataList">{{item}}</li> </ul></div></body><ｓｃｒｉｐｔ> let vm = new Vue({ el:'#app', data:{ search:'', dataList: ['a', 'at', 'atom', 'attoo', 'be', 'beyond', 'cs', 'csrf'], new_dataList: ['a', 'at', 'atom', 'attoo', 'be', 'beyond', 'cs', 'csrf'], }, methods:{ // handleInput(){ // console.log(this.search) // // 根据用户输入的search，对数组进行过滤，剩下只有包含输入文字的字符串 // var _this = this // this.new_dataList = this.dataList.filter(function(item){ // if (item.indexOf(_this.search)>=0){ // return true // }else { // return false // } // }) // } // handleInput(){ // console.log(this.search) // var _this = this // this.new_dataList = this.dataList.filter(function(item){ // return item.indexOf(_this.search) >= 0 // }) // } handleInput(){ this.new_dataList = this.dataList.filter(item=>item.indexOf(this.search)>=0) } } }) // 补充 // 1 数组的过滤 // var arr = ['a', 'at', 'atom', 'attoo', 'be', 'beyond', 'cs', 'csrf'] // // 数组.filter(匿名函数，接收一个参数，函数必须返回true或false，如果返回true，表示这个值保留) // var new_arr = arr.filter(function(item){ // console.log(item) // if (item.length>3){ // return true // }else { // return false // } // }) // console.log(new_arr) // 2 判断一个字符串是否在另一个字符串中 // var s = 'is' // var s1 = 'XxMa is me' // var res = s1.indexOf(s) // s的索引位置，如果大于等于0，说明s在s1中 // console.log(res) // 3 过滤出 数组中有at的字符串 // var arr = ['a', 'at', 'atom', 'attoo', 'be', 'beyond', 'cs', 'csrf'] // var search = 'at' // var new_arr = arr.filter(function(item){ // if (item.indexOf(search)>=0){ // return true // }else { // return false // } // }) // console.log(new_arr)</ｓｃｒｉｐｔ>猜你喜欢
联络方式：
400-123-789
邮箱：xiachao@163.com
Q Q：12345678
微信公众号 
微信二维码