1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>vue练习</title> 6 7 <!-- 开发环境版本，包含了有帮助的命令行警告 --> 8 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 9 </head> 10 <body> 11 <div id="app" > 12 <p v-if="show">是否可以显示</p> 13 <button v-on:click="btclick">点击</button> 14 <ul><li v-for="item,index of list" key="index">{{item}}</li></ul> 15 </div> 16 </body> 17 <script type="text/javascript"> 18 var app=new Vue({ 19 el:'#app', 20 data:{ 21 show:true, 22 list:[1,2,3,4,'青青子衿悠悠我心'], 23 }, 24 methods:{ 25 btclick:function(){ 26 this.show=!this.show; 27 } 28 } 29 }) 30 </script> 31 </html>
<div id="app"> <pre><a v-bind:href="url">菜鸟教程</a></pre> </div>
1 <div id="app"> 2 <p>{{ message }}</p> 3 <input v-model="message"> 4 </div> 5 6 <script> 7 new Vue({ 8 el: '#app', 9 data: { 10 message: 'Runoob!' 11 } 12 }) 13 </script>
v-model 指令用来在 input、select、text、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。
按钮的事件我们可以使用 v-on 监听事件，并对用户的输入进行响应。
Vue.js 允许你自定义过滤器，被用作一些常见的文本格式化。由"管道符"指示, 格式如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>vue练习</title> 6 7 <!-- 开发环境版本，包含了有帮助的命令行警告 --> 8 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 9 </head> 10 <body> 11 <div id="app"> 12 {{ message | capitalize }} 13 </div> 14 15 </body> 16 <script type="text/javascript"> 17 new Vue({ 18 el: '#app', 19 data: { 20 message: '288' 21 }, 22 filters: { 23 capitalize: function (value) { 24 if (value<200) return 'HH' 25 return value 26 } 27 } 28 }) 29 </script> 30 </html>
Vue.js 为两个最为常用的指令提供了特别的缩写：
v-bind 缩写
v-on 缩写
1 <div id="app" > 2 <a v-bind:href="url">菜鸟教程</a> 3 </div>
1 <!-- 完整语法 --> 2 <a v-bind:href="url"></a> 3 <!-- 缩写 --> 4 <a :href="url"></a>
1 <!-- 完整语法 --> 2 <a v-on:click="doSomething"></a> 3 <!-- 缩写 --> 4 <a @click="doSomething"></a>
条件判断语句
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>vue练习</title> 6 7 <!-- 开发环境版本，包含了有帮助的命令行警告 --> 8 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 9 </head> 10 <body> 11 <div id="app" > 12 <div v-if="type==='a'">是A啊！</div> 13 <div v-else-if="type==='b'">是B啊！</div> 14 <div v-else-if="type==='c'">是C啊！</div> 15 <DIV v-else>什么都不是啊</DIV> 16 </div> 17 18 </body> 19 <script type="text/javascript"> 20 new Vue({ 21 el:'#app', 22 data:{ 23 type:'www' 24 } 25 26 }) 27 </script> 28 </html>
v-show
我们也可以使用 v-show 指令来根据条件展示元素：
v-show 指令
1 <h1 v-show="ok">Hello!</h1>