- A+
所属分类：Web前端
2022-10-26
Vue属性的基本操作
一、绑定
（1）单向绑定
关键词：v-bind
用法：v-bind:原属性名="数据模型的key值"
例如：v-bind:href="username"（其中"username"中的说明放在“script”说明中）
简写：可以省略“v-bind”，但是不能省略冒号。
（2）双向绑定
关键词：v-model
用法：v-model:原属性名="数据模型的key值"
例如：v-model:value="username"
简写：可以省略“:value”,结果为：v-model="username"，注意此处双向绑定的属性值默认为“value”。
扩展：在双向绑定中，有一个“trim”函数，它可以用于删除字符串首尾的空格。使用的方式例如：v-model.trim="username"。常用在如果需要输入用户的名称时，可以取出首尾的空格。
----------
使用实例
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="vue.js"></script> 7 </head> 8 <body> 9 <div id="app"> 10 <div>{{msg}}</div> 11 <p>{{msg}}</p> 12 <!-- 单向绑定--> 13 <!-- <a v-bind:href="username">{{aMsg}}</a>--> 14 <!-- 单向绑定的简写--> 15 <a :href="username">{{aMsg}}</a> 16 <!-- 双向绑定--> 17 <!-- <input type="text" v-model:value="username"/><br/>--> 18 <!-- 双向绑定的简写--> 19 <!-- <input type="text" v-model="username"/><br/>--> 20 <!-- 去除字符串的首尾空格--> 21 <input type="text" v-model.trim="username"/><br/> 22 <input type="button" value="哈哈哈" @click="getValue"/> 23 </div> 24 25 </body> 26 <script> 27 new Vue({ 28 "el" : "#app", 29 "data":{ 30 "msg":"div的内容123", 31 "aMsg":"点我", 32 "username":"admin " 33 }, 34 "methods":{ 35 "getValue": function(){ 36 alert(this.username); 37 this.username = "root"; 38 } 39 }, 40 }) 41 </script> 42 </html>
说明：“value” 表示在浏览器中运行时，显示在前端的。
二、条件渲染
作用：根据条件判断元素是否能够显示
分类：（1）v-if："true":是显示；“false”:是不显示。
（2）v-else：注意“v-if”与“v-else”中间是不能加其他标签，不然会阻断的。
（3）v-show：如果是不显示，是通过CSS样式隐藏的。
-----------
使用实例：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="vue.js"></script> 7 <style> 8 .divs{ 9 border: 1px solid #ff0000; 10 width: 200px; 11 height: 200px; 12 } 13 </style> 14 </head> 15 <body> 16 <div id="app"> 17 <div v-if="flag" class="divs">div1</div> 18 <!-- <div v-else="flag" class="divs">div2</div>--> 19 <div v-show="flag" class="divs">div3</div> 20 <input type="button" value="按钮" @click="changeDiv"> 21 </div> 22 <script> 23 new Vue({ 24 el:"#app", 25 data:{ 26 flag:true, 27 }, 28 methods:{ 29 changeDiv:function(){ 30 this.flag = !this.flag; 31 }, 32 }, 33 }) 34 </script> 35 </body> 36 </html>
说明：注意第6行是导入vue脚本的。
