本文通过一个实训项目展示了Vue中常用的指令如v-text、v-html、v-bind、v-on、v-model、v-for、v-if/v-show的应用，并结合Vant UI组件库演示了van-search、van-swipe、van-tabbar的使用，帮助读者深入理解Vue的实战技巧和Vant组件的使用方法。
<title>van应用</title>
<!-- 引入样式文件 -->
<link
rel="stylesheet"
href="https://unpkg.com/vant@2.12/lib/index.css"
/>
<!-- 引入 Vue 和 Vant 的 JS 文件 -->
<script src="https://unpkg.com/vue@2.6/dist/vue.min.js"></script>
<script src="https://unpkg.com/vant@2.12/lib/vant.min.js"></script>
</head>
<body>
<!-- div#app -->
<div id="app">
<h1>
<!-- { {}} 插值表达式（渲染的数据是纯文本）-->
{ {msg}}
</h1>
<!-- v-text 等价于插值表达式 文本渲染 -->
<h1 v-text="msg"></h1>
<!-- 文本和标签渲染指令 -->
<h1 v-html="title"></h1>
<!-- 属性名 属性渲染指令 -->
<div><img v-bind:src="pic" alt=""></div>
<div> <img :src="pic" alt=""></div>
<div>
<!-- 事件渲染指令 -->
<button v-on:click="change">点击我，改变页面背景色</button>
</div>
<div>
<label for="">用户名</label>
<input type="text" name="" id="" v-model="uname">
<br>
您输
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
