<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<input type="button" value="谁是当今第一武林夫人" @click="getResult">
<h3 id="xxy" ref="xxy">三少爷女儿小鱼</h3>
<hr>
<belle ref="mybelle"></belle>
</div>
<script src="../js/vue.js"></script>
<script>
var belle = {
template:'<h3>武林第一夫人</h3>',
data(){
return {
name:'孔妃子',
subname:'李媚娘'
}
},
methods:{
show(){
console.log(this.subname);
}
}
}
const vm = new Vue({
el:'#app',
data :{},
methods:{
getResult(){
console.log(document.getElementById('xxy').innerText);
console.log(this.$refs.xxy.innerText);
console.log(this.$refs.mybelle.name);
this.$refs.mybelle.show();
}
},
components:{
belle
}
})
</script>
</body>
</html>
该代码示例展示了如何在HTML页面中使用Vue.js框架。当用户点击按钮时，调用`getResult`方法，该方法访问DOM元素的文本内容，引用组件的数据属性并调用组件方法。组件`belle`包含数据和方法，用于显示和操作“武林第一夫人”的信息。
扫一扫
111
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
