数据绑定
双向绑定
<html>
<head>
<meta charset="utf-8" />
<title>Vue.js起步</title>
<!-- 通过CDN引入Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- vue-app的根容器 -->
<div id="app">
<input type="text" v-model="name" placeholder="请输入" />
<h2>你好，{{name}}</h2>
</div>
<script type="text/javascript" charset="utf-8">
//实例化一个Vue对象
var app = new Vue({
el:'#app',
data:{
name:'qaz'
}
})
</script>
</body>
</html>
条件循环
<body>
<!-- vue-app的根容器 -->
<div id="app">
<p v-if="status === 1">当status为1时，显示该行</p>
<p v-else-if="status === 2">当status为2时显示该行</p>
<p v-else>否则显示该行</p>
</div>
<script type="text/javascript">
//实例化一个Vue对象
var app = new Vue({
el:'#app',
data:{
status:1
}
})
</script>
</body>
V-show
body>
<!-- vue-app的根容器 -->
<div id="app">
<p v-show="status === 1">当status为1时，显示该行</p>
</div>
<script type="text/javascript">
//实例化一个Vue对象
var app = new Vue({
el:'#app',
data:{
status:1
}
})
</script>
</body>
入门
网友评论