新建项目:
导入依赖: <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
基本语法
v-bind指令:可以动态绑定变量message
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <span v-bind:title="message"> <!-- 鼠标悬停时展示message--> 我在这里 </span> </div> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script> <script> var vm=new Vue({ el:"#app", data:{ message:"hello,vue!"+new Date().toLocaleString() } }); </script> </body> </html>View Code
v-if,v-else:
动态绑定布尔值变量ok的值,在网页控制台通过vm.ok=false测试页面的变化
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--view层模板--> <div id="app"> <h1 v-if="ok">Yes</h1> <h1 v-else>No</h1> </div> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script> <script> var vm=new Vue({ el:"#app", data:{ // 布尔型的变量 ok:true } }) </script> </body> </html>View Code
v-for:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <li v-for="(item,index) in items"> {{item.message}}--{{index}} </div> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script> <script> var vm=new Vue({ el:"#app", data:{ items:[ {message:'狂神java'}, {message:'狂神java2'}, {message:'狂神java3'}, ] } }); </script> </body> </html>View Code
动态绑定布尔值变定义方法methods:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <button v-on:click="sayhello">点击这里</button> </div> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script> <script> var vm=new Vue({ el:"#app", data:{ message:'狂神java' }, methods:{ sayhello:function (){ alert(this.message); } } }); </script> </body> </html>View Code
<!--
动态绑定:
在修改v-model中message的值时,也会同时改变{{message}}
-->
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> 输入的文本内容:<input type="text" v-model="message">{{message}} </div> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script> <script> var vm=new Vue({ el:"#app", data:{ message:'狂神java' } }); </script> </body> </html> <!-- 双向动态绑定 -->View Code
<!--
双向动态绑定
:v-model绑定变量qin,变量qin绑定value的属性值,前端选择哪个会确定value属性值,从而确定qin变量值
-->
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> 性别: <input type="radio" name="sex" value="男" v-model="qin">男 <input type="radio" name="sex" value="女" v-model="qin">女 <p> 选中了哪个:{{qin}} </p> </div> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script> <script> var vm=new Vue({ el:"#app", data:{ qin:"" } }); </script> </body> </html>View Code
<!--
下拉框在动态绑定的应用
-->
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> 下拉框: <select v-model="selected"> <option value="" disabled>--请选择-- </option> <option>A</option> <option>B</option> <option>C</option> </select> <span>value:{{selected}}</span> </div> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script> <script> var vm=new Vue({ el:"#app", data:{ selected:'' } }); </script> </body> </html>View Code
总结:通过v-model实现动态绑定
标签:el,Vue,新建,绑定,vm,语法,new,message From: https://www.cnblogs.com/MyBlogs-joyiyii/p/17363587.html