Community Learn Tools Library Leisure
search
English
Home > List of blog posts > Vue常用指令及方法
Blogger Information
Blog 52
fans 1
comment 1
visits 38645
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
Vue常用指令及方法
小丑0o鱼
Original
511 people have browsed it
  1. v-bind:指令,动态地绑定一个或多个特性，或一个组件 prop 到表达式.在绑定class或style特性时，支持其它类型的值，如数组或对象。高频指令,缩写为:
  3.     <style>
  4.         .active {
  5.             width: 200px;
  6.             height: 100px;
  7.         }
  8.     </style>
  9. </head>
  10. <body>
  11.     <div class="app">
  12.         <!-- v-bind,动态绑定属性 -->
  13.         <p v-text="hello" v-bind:style="styRed" :class="activeClass"></p>
  14.     </div>
  15.     <script>
  16.         new Vue({
  17.             el: ".app",
  18.             data() {
  19.                 return {
  20.                     hello: "Hello World",
  21.                     styRed: { color: "red", background: "green" },
  22.                     activeClass: 'active',
  23.                 }
  24.             },
  25.         })
  26.     </script>
  27. </body>
  28. v-show:指令,用于根据表达式之真假值展示元素.带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS property display。
  31. <body>
  32.     <div class="show">
  33.         <p v-show="flag">图片</p>
  34.         <button v-text="msg" v-on:click="handle"></button>
  35.     </div>
  36.     <script>
  37.         new Vue({
  38.             el: ".show",
  39.             data() {
  40.                 return {
  41.                     flag: "true",
  42.                     msg: "隐藏",
  43.                 }
  44.             },
  45.             methods: {
  46.                 handle() {
  47.                     this.flag = !this.flag;
  48.                     this.msg = this.flag ? "隐藏" : "显示";
  49.                 },
  50.             },
  51.         });
  52.     </script>
  53. v-on: 指令,添加一个事件监听器,通过它调用在 Vue 实例中定义的方法.高频指令,缩写为@ .
  54. 事件修饰符.prevent - 修饰符告诉 v-on 指令对于触发的事件调用event.preventDefault();.stop - 阻止事件的冒泡;.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调
  55. 按键修饰符 KeyboardEvent.key,如监控回车.keyup.enter
  56. 事件中回调传参使用$event
  58. <body>
  59.     <div class="app">
  60.         <p :style='pStyle' @click='pClick($event)'>
  61.             <!-- 修饰符可串联,prevent禁a标签跳转,stop禁冒泡 -->
  62.             <a :href="url" v-text="urlText" v-on:click.prevent.stop="handle"></a>
  63.         </p>
  64.     </div>
  65.     <script>
  66.         new Vue({
  67.             el: ".app",
  68.             data() {
  69.                 return {
  70.                     pStyle: { height: "50px", width: "100px", backgroundColor: "green" },
  71.                     url: "http://php.cn",
  72.                     urlText: "php中文网",
  73.                 }
  74.             },
  75.             methods: {
  76.                 // p元素事件
  77.                 pClick($event) {
  78.                     console.log($event);
  79.                 },
  80.                 // a元素事件
  81.                 handle() {
  82.                     console.log('未满18周年,禁入');
  83.                 }
  84.             },
  85.         })
  86.     </script>
  87. </body>
  88. v-if:指令,用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。
  90. v-else-if:指令,充当 v-if 的“else-if 块”，可以连续使用,必须紧跟在带 v-if 或者 v-else-if 的元素之后
  92. v-else:指令,来表示 v-if 的“else 块”,必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别
  96. <body>
  97.     <div class="app">
  98.         <p v-if="score >= 90" v-text="msg[0]"></p>
  99.         <p v-else-if="score >= 70 && score < 90" v-text="msg[1]"></p>
  100.         <p v-else-if="score >= 60 && score < 70" v-text="msg[2]"></p>
  101.         <p v-else v-text="msg[3]"></p>
  102.     </div>
  103.     <script>
  104.         new Vue({
  105.             el: ".app",
  106.             data() {
  107.                 return {
  108.                     score: 30,
  109.                     msg: ["优秀", "良好", "及格", "不及格"],
  110.                 }
  111.             },
  112.         })
  113.     </script>
  114. </body>
  115. v-for:指令,基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。v-for 还支持一个可选的第二个参数，即当前项的索引。v-for必须配合key来使用.
  116. 语法:v-for:”(item,index) in/of items” :key=”index”
  117. v-for 也可以来遍历一个对象,对象一般使用键名做key.
  118. 语法:v-for:”(val,name,index) in/of object” :key=”name”
  121. <body>
  122.     <div class="app">
  123.         <ul>
  124.             <!-- 遍历数组 -->
  125.             <li v-for="(item, index) in citys" :key="index" v-text="item"></li>
  126.         </ul>
  127.         <ul>
  128.             <!-- 遍历对象 -->
  129.             <li v-for="(val, name, index) in user" :key="name" v-text="`${name}:${val}`"></li>
  130.         </ul>
  131.         <!-- 遍历对象数组 -->
  132.         <ul v-for="(user, index) in users" :key="index">
  133.             <li v-for="(val, name, index) in user" :key="name" v-text="`${name}:${val}`"></li>
  134.         </ul>
  135.     </div>
  136.     <script>
  137.         new Vue({
  138.             el: '.app',
  139.             data() {
  140.                 return {
  141.                     // 数组
  142.                     citys: ['北京', '上海', '天津', '重庆'],
  143.                     // 对象
  144.                     user: { name: '张三', gender: '男', age: '20', email: 'zs@qq.com' },
  145.                     // 对象数组
  146.                     users: [
  147.                         { id: 1, name: '张三', gender: '男', age: '20', email: 'zs@qq.com' },
  148.                         { id: 2, name: '李四', gender: '男', age: '30', email: 'ls@qq.com' },
  149.                         { id: 3, name: '王五', gender: '男', age: '40', email: 'ww@qq.com' },
  150.                     ]
  151.                 }
  152.             },
  153.         })
  154.     </script>
  155. </body>
  156. v-model:指令，它能轻松实现表单输入和应用状态之间的双向绑定.在表单元素外使用不起作用
  157. 修饰符.lazy - 等同input change事件;.number - 输入字符串转为有效的数字trim - 过滤输入首尾空格
  159. <body>
  160.     <div class="app">
  161.         <p v-text="`模型中的数据:${something}`"></p>
  162.         <!-- 双向绑定 -->
  163.         <input type="text" v-model="something">
  164.         <!-- 延迟双向绑定 -->
  165.         <input type="text" v-model.lazy="something">
  166.     </div>
  167.     <script>
  168.         new Vue({
  169.             el: '.app',
  170.             data() {
  171.                 return {
  172.                     something: 0,
  173.                 }
  174.             },
  175.         })
  176.     </script>
  177. </body>
  178. 计算属性:computed.计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。每个计算属性都包含两个set、get 属性
  181. <body>
  182.     <div class="app">
  183.         <input type="number" min="0" max="100" v-model="num">
  184.         <p>单价:{{price}}</p>
  185.         <p>总额:{{mount}}</p>
  186.     </div>
  187.     <script>
  188.         const ve = new Vue({
  189.             el: '.app',
  190.             data() {
  191.                 return {
  192.                     price: 50,
  193.                     num: 0,
  194.                 }
  195.             },
  196.             computed: {
  197.                 mount: {
  198.                     get() {
  199.                         return this.price * this.num;
  200.                     },
  201.                     set(val) {
  202.                         if (val > 1000) {
  203.                             this.price = 40;
  204.                         }
  205.                     },
  206.                 }
  207.             },
  208.         });
  209.     </script>
  210. </body>
  211. 侦听器属性:watch.当需要在数据变化时执行异步或开销较大的操作时,通过watch方法，来响应数据的变化。watch中的属性方法名要与data中的数据名相同.侦听器属性和计算属性在大多数可以替代,区别:computed 是基于data中数据进行处理的，data数据变化，他也跟着变化当data中数据没有发生改变时，我们调用computed中函数n次，只会进行缓存（执行一次）,watch类似于监听机制+事件机制.
  214. <body>
  215.     <div class="app">
  216.         <input type="number" min="0" max="100" v-model="num">
  217.         <p>单价:{{price}}</p>
  218.         <p>总额:{{mount}}</p>
  219.     </div>
  220.     <script>
  221.         const ve = new Vue({
  222.             el: '.app',
  223.             data() {
  224.                 return {
  225.                     price: 50,
  226.                     mount: 0,
  227.                     num: 0,
  228.                 }
  229.             },
  230.             watch: {
  231.                 num(newVal, oldVal) {
  232.                     this.mount = newVal * this.price;
  233.                 }
  234.             }
  235.         });
  236.     </script>
  237. </body>
Correction status：Uncorrected

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post