1.修改文本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue.js"></script>
</head>
<body>
<p>单击按钮修改文本</p>
<div id="app">
<p>{{msg}}</p>
<button @click="doChange">请点击</button>
</div>
<script>
var app=new Vue({
el:"#app",
data:{
msg:"初始文件！"
},
methods:{
doChange:function(){
this.msg="新的文本！"
}
}
})
</script>
</body>
</html>
2.爱好选择
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<input type="checkbox" value="唱歌" v-model="hobbies">唱歌
<input type="checkbox" value="听音乐" v-model="hobbies">听音乐
<input type="checkbox" value="跑步" v-model="hobbies">跑步
<input type="checkbox" value="学习" v-model="hobbies">学习
<input type="checkbox" value="跳舞" v-model="hobbies">跳舞
<h2>你选择的爱好是：{{hobbies}}</h2>
</div>
<script>
var app=new Vue({
el:"#app",
data:{
hobbies:[]
}
});
</script>
</body>
</html>
3.选择喜欢的水果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<select name="fruits" v-model="fruit">
<option value="西瓜">西瓜</option>
<option value="苹果">苹果</option>
<option value="香蕉">香蕉</option>
<option value="哈密瓜">哈密瓜</option>
<option value="菠萝">菠萝</option>
</select>
<h2>你喜欢的水果是:{{fruit}}</h2>
</div>
<script>
var app=new Vue({
el:"#app",
data:{
fruit:[]
}
});
</script>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
