vue3,element引入
1.点击事件绑定
{{ message }}
const {createApp, ref, computed, reactive} = Vue
const app = createApp({
setup() {
const message = ref('Hello vue!')
clickEvent = (e) => {
alert('点击事件')
message.value = "new Hello"
}
return {
clickEvent,
message
}
}
})
app.use(ElementPlus)
app.mount('#app')
2.动态修改值
点击事件重置message:
message.value = "new Hello"
3.jQuery方法调用vue3的数据与字段
const vm=app.mount('#app'),mount之后返回vm实例对象,通过vm拿到setup里返回的东西。
{{ message }}
const {createApp, ref, computed, reactive} = Vue
const app = createApp({
setup() {
const message = ref('Hello vue!')
clickEvent = (e) => {
alert('点击事件')
message.value = "new Hello"
}
return {
clickEvent,
message
}
}
})
app.use(ElementPlus)
const vm=app.mount('#app')
console.log(">>>", app)
$(function () {
console.log(">>>jquery")
console.log(">>>jquery", vm,vm.message)
vm.clickEvent()
})
效果
4.列表对象的属性动态更新
使用ref创建一个列表,更新列表某一项对象的属性: (tableData.value)[0].REFNO
{{ message }}
{{message}}
const {createApp, ref, computed, reactive} = Vue
const app = createApp({
setup() {
const message = ref('Hello vue!') //ref: 创建一个包含响应式数据的引用对象(reference对象,简称ref对象)。赋值:message.value=newvalue
const tableData = ref([
{
checked: false,
REFNO: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
checked: false,
REFNO: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
checked: false,
REFNO: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
checked: false,
REFNO: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}]
),
updateData = (e) => {
message.value = "new Hello"
console.log("|-------",(tableData.value)[0].REFNO);
(tableData.value)[0].REFNO ="新单号|----"
}
return {//返回的是一个:promise
updateData,
tableData,
message
}
}
})
app.use(ElementPlus)
app.mount('#app')
点击之后,更新单号效果
文章链接
发表评论