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脚本的。
标签：username,Vue,--,绑定,笔记,学习,value,model From： https://www.cnblogs.com/isDaHua/p/16830287.html