金顺广州外贸网站建设,天元建设集团有限公司股份,天蓝色网站,乐清网络平台一、循环
在模板中可以用v-for指令来循环数组#xff0c;对象等。
1. 循环数组
script setup nameAppimport { reactive } from vueconst books reactive([{title: 三国演义,author: 罗贯中}, {title: 水浒传,author: 施耐庵}, {title: 西…一、循环
在模板中可以用v-for指令来循环数组对象等。
1. 循环数组
script setup nameAppimport { reactive } from vueconst books reactive([{title: 三国演义,author: 罗贯中}, {title: 水浒传,author: 施耐庵}, {title: 西游记,author: 吴承恩}, {title: 红楼梦,author: 曹雪芹}])/scripttemplatetabletheadtrth序号/thth标题/thth作者/th/tr/theadtbodytr v-for(book, index) in bookstd{{ index }}/tdtd{{ book.title }}/tdtd{{ book.author }}/td/tr/tbody/table
/template 2. 循环对象
循环对象跟循环数组是一样的。并且都可以在循环的时候使用接收多个参数。示例代码如下
script setup nameAppimport { reactive } from vueconst person reactive({username: 知了,age: 18,homepage: https://www.baidu.com/})/scripttemplatediv v-for(value, key) in person{{ key }}:{{ value }}/div
/template 3. 保持状态
循环出来的HTML标签如果没有使用key属性来唯一标识如果后期的数据发生了更改默认是会重用的HTML标签并且标签的顺序不会跟着数据的顺序更改而更改。比如 script setup nameAppimport { reactive } from vueconst books reactive([红楼梦, 水浒传, 三国演义, 西游记])const changeBooks () {books.sort((x, y) {return 5 - parseInt(Math.random() * 10)});}/scripttemplatediv v-for(book, index) in bookslabel forbook{{ book }}/labelinput typetext v-bind:placeholderbook/divbutton v-on:clickchangeBooks更换图书/button
/template
如果你在某个input标签中输入了值然后点击了“更换图书”的按钮你会发现即使数据更改了input并不会跟着数据的更改而更改这时候我们只需要在v-for的时候加上一个key属性就可以了。示例代码如下
div v-for(book,index) in books v-bind:keybooklabel forbook{{book}}/labelinput typetext v-bind:placeholderbook
/div 注意key只能是整形或者是字符串类型不能为数组或者对象。
4. 触发视图更新
Vue对一些方法进行了包装和变异以后数组通过这些方法进行数组更新会出发视图的更新。这些方法如下
push()添加元素的方法。
books.push(金瓶梅)pop()删除数组最后一个元素。
books.pop()shift()删除数组的第一个元素。
books.shift()unshift(item)在数组的开头位置添加一个元素。
books.unshift(金瓶梅)splice(index,howmany,item1,...,itemX)向数组中添加或者删除或者替换元素。
1 // 向books第0个位置添加元素
2 books.splice(1,0,金瓶梅)
3 // 下标从0开始删除2个元素
4 books.splice(0,2)
5 // 下标从0开始替换2个元素
6 books.splice(0,2,金瓶梅,骆驼祥子)sort(function)排序。books.sort(function(x,y){// 取两个随机数排序a Math.random();b Math.random();return a-b;
});reverse()将数组元素进行反转。
books.reverse();5. 覆盖数组
如果是使用ref 函数定义的数组则可直接赋值比如
// ref类型的数组books是一个数组的ref
let books ref([红楼梦, 水浒传, 三国演义, 西游记])
books.value [红楼梦, 水浒传]
如果是使用reactive 函数定义的数组则通过以下方式覆盖数组
// 通过定义成对象的方式
let books reactive({value: [红楼梦, 水浒传, 三国演义, 西游记]
});
books.value [红楼梦, 水浒传]
所以数组建议使用ref 函数来定义。
二、事件绑定
1. 基本使用
事件绑定就是在HTML元素中通过v-on绑定事件的。事件代码可以直接放到v-on后面也可以写成一个函数。示例代码如下
script setup nameApp
import { reactive, ref } from vuelet count ref(0);const subtract function (value) {count.value - value;
}/scripttemplatep{{ count }}/pbutton v-on:clickcount 1加/buttonbutton v-on:clicksubtract(10)减10/button
/template 也可以简写成click 来代替v-on:click 。
2. 传入event 参数
如果在事件处理函数中想要获取原生的DOM事件那么在html代码中调用的时候可以传递一个$event参数。示例代码如下
button v-on:clicksubtract(10,$event)减10/button
...
script
...
const subtract function(value,event){this.count - value;console.log(event);
}
...
/script
3. 事件修饰符
有时候事件发生我们可能需要做一些操作。比如针对这个事件要他的默认行为。那么我们可能通过以下代码来实现
script setup nameApp
import { reactive, ref } from vuelet count ref(0);const gotoWebsite function (event) {event.preventDefault();window.location https://www.360.cn/
}/scripttemplatea hrefhttps://www.baidu.com/ v-on:clickgotoWebsite($event)百度/a
/template
那个阻止默认事件执行的代码我们可以通过click.prevent来实现。示例代码如下
a hrefhttps://www.baidu.com/ v-on:click.preventgotoWebsite($event)百度/a
另外常见的修饰符还有以下
.stopevent.stopPropagation阻止事件冒泡。.capture事件捕获。.once这个事件只执行一次。.self代表当前这个被点击的元素自身。.passive在页面滚动的时候告诉浏览器不会阻止默认的行为从而让滚动更加顺畅
三、ref属性
ref属性用于在script 标签中获取template 中的元素。使用方法如下
在template中的某个标签上定义ref属性。在script中定义与template中与ref同名的变量。
示例代码如下
templateinput typetext refusernameInput placeholder用户名/button clickshowUsername获取用户名/button
/templatescript setup
import {ref} from vuelet usernameInput ref()
const showUsername () {console.log(usernameInput.value.value);
}
/script
四、v-model
Vue中的响应式变量是双向的如果想要通过表单元素比如input、select实时修改响应式变量则可以通过v-model属性实现示例代码如下
script setup
import {ref} from vue;
let username ref();let category ref(0);
/scripttemplate
div
input v-modelusername /
p用户名为{{username}}/p
/divdivselect v-modelcategoryoption value1Python/optionoption value2前端/option/selectp分类为{{category}}/p
/div
/template
