<body>
<div id="app">
//v-show的值为布尔值，true让标签的样式为 display:block,false则相反为display: none;
<h1 v-show="false">{{ msg }}</h1>
//v-if的值也是布尔值，ture是显示标签，false是不生成标签，这跟v-show是有区别的
<h1 v-if="true">{{ msg }}</h1>
// vue中的if..else if..else语句，if..else用法也是类似
<h1 v-if="type=='A'">我是字母A</h1>
<h1 v-else-if="type=='B'">我是字母B</h1>
<h1 v-else-if="type=='C'">我的字母C</h1>
<h1 v-else>我是其他的字母</h1>
//vue中的for循环的用法
<h1 v-for="(item,index) in arr">
遍历数组:下标{{index}}的值是{{item}}
</h1>
//vue中事件的绑定及 简写方式
<h1 v-on:click="change">绑定了一个点击事件</h1>
<h1 @click="change">绑定了一个点击事件的简写</h1>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
msg: "vue中常用指令！",
type: "C",
arr: ["A","B","C","D"]
},
//事件方法添加在methods选项中
methods: {
change: (e)=>{
console.log(e.target);
}
}
})
</script>
</body>
220
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
