Vue:实例演示,v-if,v-for,v-model,v-bind,v-on,计算属性和侦听器属性

一.实例演示,v-if,v-for,v-model,v-bind,v-on

方法含义
v-bind自定义普通属性，快捷语法是一个”:”号
v-on事件属性，快捷语法是一个”@”符
v-model双向绑定
v-forv-for : (循环变量, 索引/键) in/of 数组/对象 :key
v-if条件渲染流程判断，有单分支和多分支

①v-bind，自定义普通属性，快捷语法是一个”:”号

代码块

  1.    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">  <body>
  2.     <div class="box">
  3.       <!-- v-bind指令，自定义普通属性，-->
  4.       <p v-bind:style="style1">{{text}}</p>
  5.       <hr />
  6.       <!-- 快捷语法‘：’  -->
  7.       <p :style="style2">{{text}}</p>
  8.     </div>
  9.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  11.     <script>
  12.       new Vue({
  13.         el: ".box",
  14.         data: {
  15.           text: "v-bind指令",
  16.           style1: "color:red",
  17.           style2: "background:blue",
  18.         },
  19.       });
  20.     </script>
  21.   </body

②v-on，事件属性，快捷语法是一个”@”符

代码块

  1.    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  3.     <script>
  4.       new Vue({
  5.         el: ".box",
  6.         data: {
  7.           text: "v-on指令",
  8.         },
  9.         //事件方法
  10.         methods: {
  11.           click1() {
  12.             alert(this.text);
  13.             d;
  14.           },
  15.         },
  16.       });
  17.     </script>

③v-model，双向绑定

代码块

  1.   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  2.     <script>
  3.       new Vue({
  4.         el: ".box",
  5.         data: { data1: "祖国未来可期" },
  6.       });
  7.     </script>

④v-for,列表渲染

代码块

  1.   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  2.     <script>
  3.       new Vue({
  4.         el: ".box",
  5.         data: {
  6.           //渲染数组
  7.           item: ["苹果", "香蕉", "西瓜", "葡萄"],
  8.           //渲染对象
  9.           hobby: { hobby1: "羽毛球", hobby2: "篮球" },
  10.           //渲染对象数组
  11.           user: [
  12.             { id: 1, name: "小张", get: "20" },
  13.             { id: 2, name: "小红", get: "20" },
  14.             { id: 3, name: "小朱", get: "20" },
  15.           ],
  16.         },
  17.       });
  18.     </script>

⑤v-if,条件渲染

  • 单分支
    • 多分支

      代码块

      1. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
      2. <script>
      3. new Vue({
      4.   el: ".box",
      5.   data() {
      6.     return {
      7.       text: "点击显示或者隐藏",
      8.       flase: "true",
      9.       tips: "显示",
      10.       name: ["大众会员", "黄金会员", "铂金会员", "钻石会员", "非会员"],
      11.       point: 500,
      12.       text: "点击加积分",
      13.     };
      14.   },
      15. });
      16. </script>

二.计算属性和侦听器属性

方法含义
键盘修饰符todolist
计算属性conputed
侦听器属性watch

①键盘修饰符:todolist

代码块

  1.  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  2.     <script>
  3.       new Vue({
  4.         el: ".box",
  5.         data() {
  6.           return {
  7.             list: [],
  8.           };
  9.         },
  10.         methods: {
  11.           submit(ev) {
  12.               //原生判断键盘添加文字
  13.             // if (ev.key === "Enter") {
  14.             //   this.list.unshift(ev.target.value);
  15.             //   ev.target.value = null;
  16.             // }
  17.             //vue 键盘修饰符添加文字
  18.             this.list.unshift(ev.target.value);
  19.               ev.target.value = null;
  20.               console.log(ev.key);
  21.           },
  22.         },
  23.       });
  24.     </script>

②计算属性computed

代码块

  1.  <script>
  2.       new Vue({
  3.         el: ".box",
  4.         data() {
  5.           return {
  6.             //双向绑定sum
  7.             sum: "0",
  8.             //单价是50
  9.             money: 50,
  10.           };
  11.         },
  12.         //计算属性computed
  13.         computed: {
  14.           amount: {
  15.             //访问器属性get
  16.             get() {
  17.               //指当前sum变量*money变量
  18.               return this.sum * this.money;
  19.             },
  20.           },
  21.         },
  22.       });
  23.     </script>

③侦听器属性watch

代码块

  1. <script>
  2.       new Vue({
  3.         el: ".box",
  4.         data() {
  5.           return {
  6.             //双向绑定sum
  7.             sum: "0",
  8.             //单价是50
  9.             money: 50,
  10.             res: 0,
  11.             max: 100,
  12.           };
  13.         },
  14.         //侦听器属性
  15.         watch: {
  16.           // 是用来监听某一个属性的值的变化,属性名要和data字段中的变量名相同
  17.           // 例如,我要监听"num"变量的变化
  18.           // sum(新的值,原来的值)
  19.           sum(newVal, oldVal) {
  20.             this.res = newVal * this.money;
  22.             //监听库存量
  23.             if (newVal > 20) {
  24.               this.max = newVal;
  25.               alert("库存不足");
  26.             }
  27.           },
  28.         },
  29.       });
  30.     </script>

更多相关文章

  1. 210402 JavaScript 作用域 闭包 原型 构造函数
  2. Vue的v-bind,v-on, v-model,v-if,v-for,计算属性和侦听器属性 --
  3. Spring注解 @Resource和@Autowired比较
  4. 统信UOS系统中设置WPS双面打印的方法
  5. 4.01模板字面量和标签函数
  6. 面向对象系列教材 （二）- Java类的属性
  7. 实例演示flex容器中的四个属性的功能，参数，以及作用
  8. 【Vue框架学习】Vue常用指令、事件修饰符、按键修饰符、计算属性
  9. vue2基础语法2与监听属性和计算属性

随机推荐

  1. libacc : Android 2.0 內建的輕量級 C Co
  2. Android学习及如何利用android来赚钱
  3. Android关于ViewPager+Fragment缓存问题
  4. Android 轻松实现语音识别的完整代码
  5. Android开发工程师 iOS开发工程师正在招
  6. Android初步
  7. Android(安卓)快速开发框架:推荐10个框架
  8. Android Handler 用法
  9. Android清除所有应用的缓存(包括系统应用
  10. Android 开发之旅：view的几种布局方式及实