Vue基础
Vue实例的作用范围是 el 选中的元素
建议使用div标签，id选择器
在标签里修改部分内容用{{}}
v-text 显示文本
v-html 文本后隐藏标签
v-on 为元素绑定事件，指令可以用@引出，绑定的方法在methods中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue基础</title>
</head>
<body>
<div id = "app">
<!-- 全写-->
<input type="buttom" value="v-on指令" v-on:click="doIt">
<!-- 简写-->
<input type="buttom" value="v-on指令" @click="doIt">
<input type="buttom" value="双击指令" @dblclick="doIt">
<!-- 事件绑定-->
<h2 @click= "changefood">{{food}}</h2>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:'#app',
data:{
food:"西红柿炒蛋"
},
methods:{
doIt:function(){
alert("点我");
},
changefood:function(){
this.food+="很好吃"
}
}
})
</script>
</body>
</html>v-show 用于改变display
v-if 根据表达式的真假切换元素的显示状态
360集团公司氛围 370人发布
查看2道真题和解析