$event 事件对象
<body>
<div id='box' @click='fn($event,this)'></div> // $event 事件对象
<script>
new Vue({
el: '#box',
methods:{
fn:function(e,that){ // 上面传事件对象过来 这里接收
e= e || window.event;
console.log(e,that)
}
}
})
</script>
</body>
get 访问all的时候触发的 set 修改all的时候触发的
<body>
<div id="box">{{ all }}</div>
<script>
var oBox = new Vue({
el: '#box',
data: {
name: 'fff'
},
computed: {
all: {
get: function (){ // 访问all的时候触发的
return this.name;
},
set: function (){ // 修改all的时候触发的
this.name = 66666;
}
}
}
})
</script>
</body>
复选操作
<body>
<div id="box">
<input type="radio" value="第一个input" v-model='a'>
<input type="radio" value="第二个input" v-model='a'>
{{a}}
<p>
<input type="checkbox" value="aaa" v-model='b'>
<input type="checkbox" value="bbb" v-model='b'>
<input type="checkbox" value="ccc" v-model='b'>
{{b}}
</p>
</div>
<script>
new Vue({
el: '#box',
data:{
a: '',
b: [] // 如果上面是checkbox 要绑定同个数据时 这里要有数组，不然占任意一个会同时改变
}
})
</script>
</body>
复选框 select 时候
<body>
<div id="box">
<input type="radio" value="第一个input" v-model='a'>
<input type="radio" value="第二个input" v-model='a'>
{{a}}
<p>
<input type="checkbox" value="aaa" v-model='b'>
<input type="checkbox" value="bbb" v-model='b'>
<input type="checkbox" value="ccc" v-model='b'>
{{b}}
</p>
<p>
<select name="" id="" v-model='c' multiple>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
{{ c }}
</p>
</div>
<script>
new Vue({
el: '#box',
data:{
a: '',
b: [], // 如果上面是checkbox 要绑定同个数据时 这里要有数组，不然占任意一个会同时改变
c: []
}
})
</script>
</body>
v-modth.lazy 失去焦点时触发的 相当于 onblur
<body>
<div id="box">
<input type="text" v-model.lazy='a'> <!-- 相当于 失去焦点onblur的时候 -->
{{ a }}
</div>
<script>
new Vue({
el: '#box',
data:{
a: ''
}
})
</script>
</body>
v-modeth.trim trim过滤掉首尾的空格
<body>
<div id="box">
<input type="text" v-model.lazy='a'> <!-- 相当于 失去焦点onblur的时候 -->
{{ a }}
<input type="text" v-model.trim='b'> <!-- trim() 过滤掉首尾的空格 -->
{{ b }}
</div>
<script>
new Vue({
el: '#box',
data:{
a: '',
b: ''
}
})
</script>
</body>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
