<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<title>简单案例</title>
<style>
.class1{
color: red;
background: orchid;
}
</style>
</head>
<body>
<div id="box">
<h1>{{ msg }}</h1>
<h3> {{ fn() }} </h3>
<h2 v-html="msg"></h2>
<label v-if="OK" for="btn">修改</label>
<input type="checkbox" v-model="user" id="btn">
<div :class='{"class1":user}'>v-bind指令</div>
</div>
</body>
</html>
<script>
new Vue({
el : "#box",
data : {
msg : "vue是框架",
user : false,
OK : true
},
methods: {
fn:function(){
return this.msg + "方便组件通信"
}
},
})
</script>
<!--
data用来定义属性，methods用来定义函数，利用return返回函数值；
{{}}模板语法
v-html输出指令 例如：<h2 v-html="msg"></h2>
v-bind 完整语法 v-bind:class='{"class1":user}'
缩写语法:class='{"class1":user}'
v-if 切换 data下定义OK的属性为Boolean止；true显示false隐藏 直接删除或添加
-->
网友评论