访问dom 节点 在以前原始开发方式中,我们需要获取dom 的id,使用getElementById的方式获取dom
在vue中,我们需要使用ref来获得dom,
<template>
<div class="hello">
<input type="text" v-model="msg" ref="itest" />
<hr />
<input type="button" value="获取消息" v-on:click="getMsg()" />
</div>
</template>
<script>
export default {
data () {
return {
msg:'测试消息'
}
},
methods: {
setFunc(data){
alert(data);
},
getMsg() {
var elem = this.$refs.itest;
console.log(elem.value);
//alert(this.msg);
}
}
}
</script>
我们现在可以通过之前的学习,写一个综合的小DEMO , 本实例通过VUE双向绑定,获取select 选中值
<template>
<div class="hello">
<input type="text" v-model="msg" ref="itest" />
<input type="button" value="获取消息" v-on:click="getMsg()" />
<hr />
<select v-model="sel">
<option value="">请选择</option>
<option :value="item.id" v-for="item in datas">{{item.name}}</option>
</select>
</div>
</template>
<script>
export default {
data () {
return {
msg:'测试消息',
sel: '',
datas : [
{id: 1, name: '选项1'},
{id: 2, name: '选项2'},
{id: 3, name: '选项3'}
]
}
},
methods: {
getMsg() {
var elem = this.$refs.itest;
//alert(this.msg);
alert(this.sel);
}
}
}
</script>
在传统的开发方式中,input 如果type类型为text的,即文本框那种的,绑定值是value, checkbox 选中值属性为 checked=“checked” ; 在vue 中,绑定是统一采用 v-model 语法进行绑定,如
<input type="text" v-model='todo' />
<input type="checkbox" v-model="item.checked" />
这里需要注意下相关知识点。