vue模板语法上集->插值,指令,过滤器,计算属性&监听属性,vue购物车

简介: vue模板语法上集->插值,指令,过滤器,计算属性&监听属性,vue购物车
  • 插值
  • 指令
  • 过滤器
  • 计算属性&监听属性
  • vue购物车

1.插值

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
    <title>插值</title>
    <style type="text/css">
      .f30{
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <p>文本</p>
      {{msg}}
      <p>html解析</p>
      <p>字体颜色变黄</p>
      <b v-html="msg2"></b>
      <p>字体变黄变大</p>
      <b :class="msg3" v-html="msg2"></b>
      <p>表达式</p>
      {{num+1}}<br />
      {{warn.substr(0,2)}}<br />
      <input v-model="ok"/>
      {{ok==1?'被抓了':'有内鬼'}}
    </div>
    <script type="text/javascript">
      new Vue({
        el:'#app',
        data(){
          return{
            msg:'hello 小兵',
            msg2:'<span style="color:yellow">hello 小兵</span>',
            msg3:'f30',
            num:6,
            warn:'条子来了',
            ok:1
          };
        }
      });
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
    <title>指令</title>
  </head>
  <body>
    <div id="app">
      <p>v-if/v-else-if/v-else</p>
      <input v-model="score"/><br />
      <b v-if="score<60">不及格</b>
      <b v-else-if="score>=60 && score<70">及格</b>
      <b v-else-if="score>=70 && score<80">一般</b>
      <b v-else-if="score>=80 && score<90">良好</b>
      <b v-else="">优秀</b>
      60以下 不及格
      60-70 及格
      70-80 一般
      80-90 良好
      90-100 优秀
      <p>v-show</p>
      v-if与v-show的区别<br />
      <b v-if="isShow">展示</b>
      <b v-show="isShow">展示</b>
      <p>v-for</p>
      <i v-for="a in arr">{{a}}&nbsp;&nbsp;</i>
      <i v-for="i,u in users">&nbsp;&nbsp;{{i}}</i>
      <select>
        <option v-for="h in hobby" :value="h.id">{{h.name}}</option>
      </select>
      <div id="" v-for="h in hobby"     >
        <input type="checkbox" name="hobby"  :value="h.id" />{{h.name}}
      </div>
    </div>
    <script type="text/javascript">
      new Vue({
        el:'#app',
        data(){
          return{
            score:34,
            isShow:false,
            arr:[1,2,3,4],
            users:[{
              name:'ab',id:1
            },{
              name:'ac',id:2
            },{
              name:'ad',id:3
            },{
              name:'ae',id:4
            }],
            hobby:[{
              name:'保健',id:1
            },{
              name:'理发',id:2
            },{
              name:'洗头',id:3
            },{
              name:'养生',id:4
            }]
          };
        }
      });
    </script>
  </body>
</html>

3.过滤器

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
    <script src="date.js" type="text/javascript" charset="utf-8"></script>
    <title>过滤</title>
  </head>
  <body>
    <div id="app">
      <p>局部过滤器基本应用</p>
      {{msg}}<br />
      {{msg | filterA}}
      <p>局部过滤器串行使用</p>
      {{msg}}<br />
      {{msg | filterA | filterB}}
      <p>局部过滤器传参</p>
      {{msg | filterC(3,10)}}<br />
      <p>全局过滤器</p>
      {{time}}<br />
      {{time | fmtDateFilter}}
    </div>
    <script type="text/javascript">
      Vue.filter('fmtDateFilter',function(value){
        return fmtDate(value);
      });
      new Vue({
        el:'#app',
        filters:{
                   'filterA':function(v){
             return v.substring(0,6);
           },
           'filterB':function(v){
               return v.substring(2,5);
            },
           'filterC':function(v,begin,end){
               return v.substring(begin,end);
            }
        },
        data(){
          return{
            msg:'小猪同学,你的好基友被抓了',
            time:new Date()
          };
        }
        ,methods:{
          test(){
            // 单击事件,双击事件
            alert('点我试试!!');
          }
        }
      });
    </script>
  </body>
</html>

4.计算属性&监听属性

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
    <title>计算属性监听属性</title>
    </style>
  </head>
  <body>
    <div id="app">
      <p>计算属性</p>
      单价:<input v-model="price"/>
      数量:<input v-model="num"/>
      小计:{{count}}
      <p>监听属性</p>
      千米:<input v-model="km"/><br />
      米:<input v-model="m"/><br />
    </div>
    <script type="text/javascript">
      new Vue({
        el:'#app',
        data(){
          return{
            price:78,
            num:1,
            km:1,
            m:1000
          };
        },
        computed:{
          count:function(){
            return this.price * this.num;
          }
        },
        watch:{
          km:function(v){
            // v指的是被监听的属性,是km
            this.m=parseInt(v) * 1000;
          },
          m:function(v){
            // v指的是被监听的属性,是m
            this.km=parseInt(v) / 1000;
          }
        }
      });
    </script>
  </body>
</html>

5.vue购物车

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
    <title>vue购物车</title>
  </head>
  <body>
    <div id="app">
      <div v-if="cart.length==0">
        <p>购物车为空</p>
      </div>
      <!-- //st实体,xb下标 -->
      <div v-else v-for="st,xb in cart" :key="xb">
        <p>名称:{{st.name}}</p>       
        <p>价格:{{st.price}}</p>
        <p>数量:{{st.num}}</p>
        <p>单价:{{st.price * st.num}}</p>
        <button @click="increaseQuantity(xb)">+</button>
        {{st.num}}
          <button @click="decreaseQuantity(xb)">-</button>
        <button @click="removeFramCart(xb)">移除</button>
      </div>
    </div>
    <script type="text/javascript">
      new Vue({
        el:'#app',
        data(){
          return{
            cart:[
              {id:1,name:'香蕉',price:10,num:1},
              {id:2,name:'橘子',price:20,num:1},
              {id:3,name:'西瓜',price:16,num:1},
            ],
          };
        },
        methods:{
          removeFramCart(xb){
              this.cart.splice(xb,1); 
          },
          increaseQuantity(xb) {
              this.cart[xb].num++;
          },
          decreaseQuantity(xb){
            if(this.cart[xb].num > 1){
              this.cart[xb].num--;
            }else{
              removeFramCart(xb);
            }
          },
        },
      });
    </script>
  </body>
</html>

目录
相关文章
|
3月前
|
存储 缓存 JavaScript
如何在大型 Vue 应用中有效地管理计算属性和侦听器
在大型 Vue 应用中,合理管理计算属性和侦听器是优化性能和维护性的关键。本文介绍了如何通过模块化、状态管理和避免冗余计算等方法,有效提升应用的响应性和可维护性。
|
4月前
|
缓存 JavaScript Serverless
vue中computed计算属性、watch侦听器、methods方法的区别以及用法
vue中computed计算属性、watch侦听器、methods方法的区别以及用法
246 0
|
2月前
|
JavaScript
vue使用iconfont图标
vue使用iconfont图标
151 1
|
8天前
|
移动开发 JavaScript API
Vue Router 核心原理
Vue Router 是 Vue.js 的官方路由管理器,用于实现单页面应用(SPA)的路由功能。其核心原理包括路由配置、监听浏览器事件和组件渲染等。通过定义路径与组件的映射关系,Vue Router 将用户访问的路径与对应的组件关联,支持哈希和历史模式监听 URL 变化,确保页面导航时正确渲染组件。
|
11天前
|
监控 JavaScript 前端开发
ry-vue-flowable-xg:震撼来袭!这款基于 Vue 和 Flowable 的企业级工程项目管理项目,你绝不能错过
基于 Vue 和 Flowable 的企业级工程项目管理平台,免费开源且高度定制化。它覆盖投标管理、进度控制、财务核算等全流程需求,提供流程设计、部署、监控和任务管理等功能,适用于企业办公、生产制造、金融服务等多个场景,助力企业提升效率与竞争力。
66 12
|
7天前
|
JavaScript 前端开发 开发者
Vue中的class和style绑定
在 Vue 中,class 和 style 绑定是基于数据驱动视图的强大功能。通过 class 绑定,可以动态更新元素的 class 属性,支持对象和数组语法,适用于普通元素和组件。style 绑定则允许以对象或数组形式动态设置内联样式,Vue 会根据数据变化自动更新 DOM。
|
8天前
|
JavaScript 前端开发 数据安全/隐私保护
Vue Router 简介
Vue Router 是 Vue.js 官方的路由管理库,用于构建单页面应用(SPA)。它将不同页面映射到对应组件,支持嵌套路由、路由参数和导航守卫等功能,简化复杂前端应用的开发。主要特性包括路由映射、嵌套路由、路由参数、导航守卫和路由懒加载,提升性能和开发效率。安装命令:`npm install vue-router`。
|
29天前
|
JavaScript 安全 API
iframe嵌入页面实现免登录思路(以vue为例)
通过上述步骤,可以在Vue.js项目中通过 `iframe`实现不同应用间的免登录功能。利用Token传递和消息传递机制,可以确保安全、高效地在主应用和子应用间共享登录状态。这种方法在实际项目中具有广泛的应用前景,能够显著提升用户体验。
58 8
|
30天前
|
存储 设计模式 JavaScript
Vue 组件化开发:构建高质量应用的核心
本文深入探讨了 Vue.js 组件化开发的核心概念与最佳实践。
77 1
|
3月前
|
JavaScript 前端开发 开发者
vue 数据驱动视图
总之,Vue 数据驱动视图是一种先进的理念和技术,它为前端开发带来了巨大的便利和优势。通过理解和应用这一特性,开发者能够构建出更加动态、高效、用户体验良好的前端应用。在不断发展的前端领域中,数据驱动视图将继续发挥重要作用,推动着应用界面的不断创新和进化。
111 58

热门文章

最新文章