Vue——属性指令、style和class、条件渲染、列表渲染、事件处理、数据双向绑定、过滤案例
vm对象
<body>
<div id="app">
<h1>{{name}}</h1>
<button @click="handleClick">点我</button>
</div>
</body>
<script>
// 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 = '彭于晏'
}
}
})
</script>
函数传参
<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>
<script>
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)
}
},
})
</script>
属性指令
// 标签上 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>
<script>
let vm = new Vue({
el: '#app',
data: {
url: 'https://img2.woyaogexing.com/2023/06/01/11de6aa55c3ccc0fc35ba1ab6e4ae2b5.jpg'
h: '200px',
w: '200px'
},
methods: {
handleClick() {
this.h = '400px'
this.w = '400px'
},
}
})
</script>
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>
<script>
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') // 这样才有响应式
}
}
})
</script>
条件渲染
<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>
<script>
let vm = new Vue({
el:'#app',
data:{
score:92
},
})
</script>
列表渲染
// 循环渲染一些数据，比如购物车的数据
// 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>
<script>
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},
]
}
}
})
</script>
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>
<script>
let vm = new Vue({
el:'#app',
data:{
number:10,
str:'XxMa',
arr:[11,22,33,44,55],
obj:{name:'xxx',age: 19,gender:'男'}
}
})
</script>
双向数据绑定 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>
<script>
let vm = new Vue({
el:'#app',
data:{
username:'xxx',
password:'123',
},
methods:{
handleSubmit(){
console.log(this.username)
console.log(this.password)
}
}
})
</script>
事件处理
// 事件指令
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>
<script>
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)
}
}
})
</script>
过滤案例(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>
<script>
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)
</script>
Vue——属性指令、style和class、条件渲染、列表渲染、事件处理、数据双向绑定、过滤案例的更多相关文章
- 第二章 Vue快速入门--13 讲解v-model实现表单元素的数据双向绑定
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- 前端vue之属性指令、style和class、条件渲染、列表渲染、事件处理、数据双向绑定、表单控制、v-model进阶
今日内容概要 属性指令 style和class 条件渲染 列表渲染 事件处理 数据的双向绑定 v-model进阶 购物车案例 内容详细 1.属性指令 <!DOCTYPE html> < ...
- 【vue2】Style和Class，条件，列表渲染，双向数据绑定，事件处理
目录 1.style和class 2. 条件渲染 2.1 指令 2.2 案例 3. 列表渲染 3.1 v-for:放在标签上,可以循环显示多个此标签 3.2 v-for 循环数组,循环字符串,数字,对 ...
- 【Vue】style和class 列表渲染 使用v-for进行循环 监控失效 双向数据绑定 过滤案例 事件修饰符
目录 昨日回顾 style和class class属性的三种设置方法 style属性的三种设置方法 条件渲染 列表渲染 使用v-for进行循环 循环数字 循环字符串 循环对象 循环数组 标签key值加 ...
- vue学习笔记（二）- 数据绑定、列表渲染、条件判断
vue的数据绑定和列表渲染的造轮子 GitHub:八至 作者:狐狸家的鱼 双向数据绑定 Vue中数据的双向绑定-v-model 数据->页面 页面->数据 适用:input.select. ...
- 对象的属性类型 和 VUE的数据双向绑定原理
如[[Configurable]] 被两对儿中括号 括起来的表示 不可直接访问他们 修改属性类型:使用Object.defineProperty() //IE9+ 和标准浏览器 支持 查看属性的 ...
- Vue数据双向绑定原理及简单实现
嘿,Goodgirl and GoodBoy,点进来了就看完点个赞再go. Vue这个框架就不简单介绍了,它最大的特性就是数据的双向绑定以及虚拟dom.核心就是用数据来驱动视图层的改变.先看一段代码. ...
- 前端笔记之微信小程序（二）{{}}插值和MVVM模式&数据双向绑定&指令&API
一.双花括号{{}}插值和MVVM模式 1.1 体会{{}}插值 index.wxml的标签不是html的那些标签,这里的view就是div. {{}}这样的插值写法,叫做mustache语法.mus ...
- Vue数据双向绑定(面试必备) 极简版
我又来吹牛逼了,这次我们简单说一下vue的数据双向绑定,我们这次不背题,而是要你理解这个流程,保证读完就懂,逢人能讲,面试必过,如果没做到,请再来看一遍,走起: 介绍双向数据之前,我们先解释几个名词: ...
- vue中v-model 数据双向绑定
表单输入绑定 v-model 数据双向绑定,只能应用在input /textare /select <div id="app"> <input type=&quo ...
随机推荐
- RMQ总结
题目描述 给定N个数的序列和M次询问,每次询问给定左右端点区间中的最大值 输入样例: 6 (N) 34 1 8 123 3 2 4 (M) 1 2 1 5 3 4 2 3 输出样例: 34 123 1 ...
- netty IO模式的支持
netty IO模式的支持 选择开发模式: // 设置对应 EventLoopGroup // Nio模型 EventLoopGroup bossGroup = new NioEventLoopGro ...
- Kotlin 与 JAVA 不同之处
添加kotlin混编支持 要在Android项目中添加Kotlin混编支持,需要进行以下步骤: 在项目的 build.gradle 文件中添加以下代码: kotlin android { ... // ...
- 方差分析3——正交表与正交实验设计（R语言）
正交试验设计(orthogonal design简称正交设计(orthoplan),是利用正交表(orthogonal table)科学地安排与分析多因素试验的方法,是最常用的试验设计之一.正交表是一 ...
- 二进制安装Kubernetes（k8s） v1.23.6
二进制安装Kubernetes(k8s) v1.23.6 背景 kubernetes二进制安装 1.23.3 和 1.23.4 和 1.23.5 和 1.23.6 文档以及安装包已生成. 后续尽可能第 ...
- [Java EE]小结：生成全局唯一编号的思路
并发是一个让人很头疼的问题,通常会在服务端或数据库端做处理,保证在并发下数据的准确性. 为此,简要讨论一下,如何通过解决全局生成唯一编号的并发问题. 1 MySQL数据库的锁 1-0 锁的分类 按锁定 ...
- 6.理解Jwt代码
1.昨天主要是对Jwt的代码里面不熟悉的代码进行了简要的理解,发现其实有些流程并不是普通程序员自己写的,而是自己进行拓展,这些流程是开源程序员写的开发流程:我发现这些代码一般要么是父类的方法实现,要么 ...
- 【Diary】CSP-J 2019 游记
大废话游记. CSP-J1 Day-1 写13年的初赛题.感觉挺简单.但是问题求解第二问数数数错了,加上各种sb错误,只写了八十几分... 然后跑去机房问,那个相同球放相同袋子的题有没有数学做法. 没 ...
- Java Stream流
Java8 Stream流编程 Stream 使用一种类似于SQL语句从数据库查询数据的直观方式来提供对 Java 集合运算和表达的高阶抽象.得益于 Lambda 所带来的函数式编程,Stream A ...
- gs_probackup增量备份ptrack.cpp : 88
问题描述:使用gs_probackup对opengauss进行增量备份失败[omm@testmysqldb04 ~]$ sh gs_probackup.sh incbackup pg_switch_x ...