【Vue 从入门到实战 进阶式掌握完整知识体系】015
【Vue 从入门到实战 进阶式掌握完整知识体系】015
6、组件间双向绑定高级内容不能写多个v-model但是可以写多个带属性的v-model:XXX代码语言：javascript代码运行次数：0运行复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF
【Vue 从入门到实战 进阶式掌握完整知识体系】015
6、组件间双向绑定高级内容
不能写多个v-model但是可以写多个带属性的v-model:XXX
代码语言：javascript代码运行次数：0运行复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hello vue</title>
<!-- 引入Vue库 -->
<script src="@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
ct app = ({
data(){
return{
count: 1,
count1: 1
}
},
template: `
<div>
<test v-model:app="count" v-model:app1="count1" />
</div>
`
});
appponent('test',{
// modelValue 是固定写法
props:['app', 'app1'],
methods:{
add(){
// 固定写法
this.$emit('update:app', this.app + )
},
add1(){
// 固定写法
this.$emit('update:app1', this.app1 + )
}
},
template: `
<div @click="add()">{{app}}</div>
<div @click="add1()">{{app1}}</div>
`
})
ct vm = ('#root');
</script>
</html>运行结果
自定义v-model上的修饰符
代码语言：javascript代码运行次数：0运行复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hello vue</title>
<!-- 引入Vue库 -->
<script src="@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
ct app = ({
data(){
return{
count: 'a'
}
},
// 自定义一个修饰符
template: `
<div>
<test v-model.uppercase="count" />
</div>
`
});
appponent('test',{
// modelValue 是固定写法
// props:['modelValue'],
props:{
'modelValue': String,
'modelModifiers': {
default: () => ({}) // 默认为空
}
},
methods:{
add(){
let newValue = + 'c';
if(uppercase){
newValue = ();
}
this.$emit('update:modelValue', newValue);
}
},
template: `
<div @click="add()">{{modelValue}}</div>
`
})
ct vm = ('#root');
</script>
</html>运行结果
#感谢您对电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格的认可，转载请说明来源于"电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格
上传时间： 2025-07-23 18:10:36
推荐阅读
| 留言与评论（共有 17 条评论） |
| 本站网友 移风易俗的易 | 24分钟前 发表 |
| 【Vue 从入门到实战 进阶式掌握完整知识体系】015 6 | |
| 本站网友 李娅 | 19分钟前 发表 |
| 'modelModifiers' | |
| 本站网友 北京尿毒症医院 | 21分钟前 发表 |
| { 'modelValue' | |
| 本站网友 有限合伙人 | 8分钟前 发表 |
| methods | |
| 本站网友 丽水二手房信息 | 3分钟前 发表 |
| initial-scale=1.0"> <title>hello vue</title> <!-- 引入Vue库 --> <script src="@next"></script> </head> <body> <div id="root"></div> </body> <script> ct app = ({ data(){ return{ count | |
| 本站网友 信用记录 | 0秒前 发表 |
| template | |
| 本站网友 癫痫病的最新疗法 | 21分钟前 发表 |
| { add(){ // 固定写法 this.$emit('update | |
| 本站网友 电脑保护软件 | 27分钟前 发表 |
| props | |
| 本站网友 什么专业最赚钱 | 16分钟前 发表 |
| 'app1'] | |
| 本站网友 激光除皱 | 29分钟前 发表 |
| this.app1 + ) } } | |
| 本站网友 格德斯 | 20分钟前 发表 |
| app' | |
| 本站网友 陈丹彤 | 27分钟前 发表 |
| String | |
| 本站网友 英库 | 24分钟前 发表 |
| { add(){ let newValue = + 'c'; if(uppercase){ newValue = (); } this.$emit('update | |
| 本站网友 1厘米是多少毫米 | 7分钟前 发表 |
| template | |
| 本站网友 生活垃圾 | 3分钟前 发表 |
| { // modelValue 是固定写法 // props | |
| 本站网友 补脑食品 | 22分钟前 发表 |
| app1="count1" /> </div> ` }); appponent('test' | |