0
点赞
收藏
分享

微信扫一扫

vue3.0入门(三)

前言

  • 最近在b站上学习了飞哥的​​vue教程​​
  • 学习案例已上传,​​下载地址​​

class绑定

对象绑定

:class='{active:isActive}'  // 相当于class="active"
:class="'active'" // 相当于class="active" ,这里绑定的是一个字符串
:class='classObject' // 配合计算属性使用,绑定一个函数

Vue.createApp({
data(){
return {
isActive: true
}
},
computed: {
classObject(){
return{}
}
}
}).mount('dom节点')

数组语法绑定

.active{
color: red;
}
.font{
font-size: 20px;
}

:class='[activeClass, fontClass]' // 绑定对应css
// 绑定三目运算,后者表示isFont为true则绑定(并上)后面的样式
:class='[isActive ? activeClass : "", isFont&&fontClass]'
:class='[{active: isActive}, fontClass]' // 也可在数组中绑定对象

Vue.createApp({
data(){
return {
isActive: true
,isFont: false
,activeClass: 'active' // 绑定style
,fontClass: 'font'
}
}
}).mount('dom节点')

组件绑定class

  • 单根组件绑定class,在组件上同样可使用数组语法绑定
  • 多根组件绑定class,视图部分的组件需class绑定,脚本部分的模板使用:class='$attrs.class绑定的节点才起作用

<todo-item :class='[{active: isActive},fontClass]'></todo-item>
<my-component :class='[{active: isActive}]'></my-component>

const app = Vue.createApp({
data(){
return {
isActive: true
,fontClass: 'font'
}
}
})

// 注册组件todo-item,模板中只有一个根节点元素是单根组件
app.component('todo-item', {
template: `<li>这是文本</li>`
})

// 多根组件:模板中有多个元素节点的组件
app.component('my-component', {
template: `<li :class='$attrs.class'>这是模板中li</li>
<p>这是模板中p标签</p>`
})

const vm = app.mount('dom节点')

内联样式对象

:style='{color: colorStyle, font: fontStyle}'
:style='styleObject' // 绑定一个样式对象
:style='[baseStyles, styleObject]' // 在数组中绑定多个样式对象

Vue.createApp({
data(){
return {
colorStyle: 'red'
,fontStyle: '24px'
,styleObject: { // 样式对象
color: 'red',
fontSize: '13px'
}
}
}
}).mount('dom节点')

列表渲染

<!-- v-if的优先级高于v-for,v-if在使用v-for的遍历对象时会报错,要想同时使用,需用template标签 -->
<ul>
<template v-for="todo in todos">
<!-- 显示所有要遍历的对象的id%2=0的对象名称 -->
<li v-if='todo.id % 2== 0'>{{todo.name}}</li>
</template>
</ul>

const vm = Vue.createApp({
data(){
return {
todos: [
{},{},{} // 数组对象
]
}
}
}).mount('dom节点')

  • 变更方法

vm.todos.push({id: 6, name: 'c++'})  // 例如push()可用于添加对象

  • 替换数组

vm.todos = vm.todos.filter(item => item.id% 2==0)  // filter()用于过滤,item表示要遍历的对象

多事件处理

  • 一个事件绑定多个方法

@click='one(1, $event), two($event)'  // 视图部分,同时绑定两个方法,参数$event表示事件状态

Vue.createApp({
data(){
return{}
},
methods: {
one(id, e){
console.log("id:", id, ",e:", e);
},
two(e){
console.log("two:", e)
}
}
}).mount("dom节点")

表单输入绑定

  • 单选框、复选框、下拉列表、修饰符绑定等,这里简单演示两个
  • 更多详情可查看文档:​​https://v3.cn.vuejs.org/guide/forms.html​​

<h3>单个复选框,绑定boolean</h3>
<input type="checkbox" v-model='flag'>记住登录
<p>{{flag}}</p>
<h3>修饰符lazy,文本框失去焦点时解析</h3>
<input type="text" v-model.lazy='msg'>
{{msg}}

Vue.createApp({
data(){
return{
flag: null
,msg: ''
}
}
}).mount("dom节点")



举报

相关推荐

0 条评论