你不能不了解的Vue【模板语法上集】!-阿里云开发者社区

一.Vue插值

1.文本

2.html样式渲染

3.表达式

4.源码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
     <!-- 1.导入vue在线依赖-->
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
    <title>Vue入门</title>
    <style type="text/css">
      .f30{
      font-size: 30px;  
      }
    </style>
    <!-- 2.定义vue所管理的边界（有且只有一个根节点） -->
    <div  id="lz">
      <p>文本</p>
      {{msg}}
      <p>样式渲染</p>
      <b  :class="msg3" v-html="msg2"></b>
      <p>表达式</p>
      {{num+1}}
      {{warn.substring(0,2)}}
      <input  v-model="ok"/>
      {{ok==1? '你没了' : '一起上路'}}
    </div>
    <!-- 构建vue实例，绑定实例 -->
    <script  type="text/javascript">
      new Vue({
        el:"#lz",
        data(){
          return {
          msg:'刘兵要上百星王者' ,
          msg2:'<span style="color:yellow">刘兵要上百星王者</span>' ,
          msg3:'f30',
          num:6,
          warn:'警察来咯',
          ok:1
          };
        }
      });
    </script>
  </head>
  <body>
  </body>
</html>

二.插值

1.源码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
     <!-- 1.导入vue在线依赖-->
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
    <title>Vue入门</title>
    <!-- 2.定义vue所管理的边界（有且只有一个根节点） -->
    <div  id="lz">
      <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-if="score >=90 && score<100">ok'</b>
      <p>v-show</p>
      v-if 和v-show区别
      <b  v-if="isShow">展示</b>
      <b  v-show="isShow">展示</b>
      <p>v-for</p>
      <i  v-for="a in arr">{{a}}</i> 
      <i  v-for="  u in user">{{u.name}}</i>
      <p>下拉框</p>
      <select>
        <option v-for="h  in  hoppy" :value="h.id">{{h.name}}</option>
      </select>
      <div  id="" v-for="h  in  hoppy"></div>
      <input  type="checkbox" name="hoppy"  :value="h.id"/>{{h.name}}
    </div>
    <!-- 构建vue实例，绑定实例 -->
    <script  type="text/javascript">
      new Vue({
        el:"#lz",
        data(){
          return {
            score:55,
            isShow:false,
            arr:[1,2,3,4],
            user:[
              {name:'lz',id:1},
              {name:'zx',id:2},
              {name:'nb',id:3},
            ],
            hoppy:
            [
              {name:'洗澡',id:1},
              {name:'是假的吧',id:2},
              {name:'撒旦解放和',id:3},
            ]
            };
        }
      });
    </script>
  </head>
  <body>
  </body>
</html>

2.v-if

2.v-if 和v-show区别

3.变量数据以及下拉框和

三.过滤器

1.局部过滤器

1.1语法

new Vue({

filters:{'filterName':function(value){}}

});

在其中 filterName是过滤器名字，根据自己需求即可

常见的过滤器使用

vue允许你自定义过滤器，被用作一些常见的文本格式化，格式如下：



{{ name | capitalize }}



<div v-bind:id="rawId | formatId"></div>

注1：过滤器函数接受表达式的值作为第一个参数

注2：过滤器可以串联

{{ message | filterA | filterB }}

注3：过滤器是JavaScript函数，因此可以接受参数：

{{ message | filterA('arg1', arg2) }}

1.2实例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
     <!-- 1.导入vue在线依赖-->
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
  <script  src="js/date.js"></script>
    <title>局部过滤器</title>
    <!-- 2.定义vue所管理的边界（有且只有一个根节点） -->
    <div id="app">
          {{msg|all}},{{msg|single}},{{msg|all|single}},{{msg|param(4,5)}}
        </div>
      </body>
      <script type="text/javascript">
        new Vue({
          el: '#app',
          data() {
            return {
              msg:"还是短发v江户时代列举法"
            };
          },
          filters:{
            'all': function(val) {
              return val.substring(1, 4);
            },
            'single':function(val){
              return val.substring(2,3);
            },
            'param':function(val,start,end){
              return val.substring(start,end);
            }
          }
        })
      </script>
  </head>
  <body>
  </body>
</html>

1.3效果展示

2.全局过滤器

2.1语法

全局过滤器

Vue.filter('filterName', function (value) {

// value 表示要过滤的内容

});

其核心作用为：在全局对于我们要过滤的内容进行过滤

2.2实例

导入html界面

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
     <!-- 1.导入vue在线依赖-->
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
  <script  src="js/date.js"></script>
    <title>局部过滤器</title>
    <!-- 2.定义vue所管理的边界（有且只有一个根节点） -->
      <script src="date.js" type="text/javascript" charset="utf-8"></script>
        <body>
          <!-- 定义边界 -->
          <div id="app">
            {{msg}}_过滤之前<br>
            {{msg | all}}_过滤之后
          </div>
        </body>
        <script type="text/javascript">
          // 全局过滤器
              Vue.filter('all', function(value) {
                return fmtDate(value);
              });
          new Vue({
            el: '#app',
            data(){
              return{
                msg:new Date()
              }
            }
          })
        </script>
  </head>
  <body>
  </body>
</html>

导入时间的js用于验证方法

//给Date类添加了一个新的实例方法format
Date.prototype.format = function (fmt) {
  //debugger;
    var o = {
        "M+": this.getMonth() + 1,                 //月份
        "d+": this.getDate(),                    //日
        "h+": this.getHours(),                   //小时
        "m+": this.getMinutes(),                 //分
        "s+": this.getSeconds(),                 //秒
        "q+": Math.floor((this.getMonth() + 3) / 3), //季度
        "S": this.getMilliseconds()             //毫秒
    };
    if (/(y+)/.test(fmt))
        fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    for (var k in o)
        if (new RegExp("(" + k + ")").test(fmt))
            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
    return fmt;
};
function fmtDate(date, pattern) {
  var ts = date.getTime();
    var d = new Date(ts).format("yyyy-MM-dd hh:mm:ss");
    if (pattern) {
        d = new Date(ts).format(pattern);
    }
    return d.toLocaleString();
};

2.3效果图

四.计算属性&监听属性

1.计算属性

1.1语法

计算属性可用于快速计算视图（View）中显示的属性。这些计算将被缓存，并且只在需要时更新

computed:{}

1.2实例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
     <!-- 1.导入vue在线依赖-->
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
  <script  src="js/date.js"></script>
    <title>计算属性</title>
    <!-- 2.定义vue所管理的边界（有且只有一个根节点） -->
      <script src="date.js" type="text/javascript" charset="utf-8"></script>
        <body>
          <!-- 定义边界 -->
      <div id="app">
            千米：<input v-model="km"><br>
            米：<input v-model="m">
          </div>
        <script type="text/javascript">
          new Vue({
            el: '#app',
            data(){
              return{
                m:1000,
                km:1
              }
            },
              watch:{
                // v指的是m变量
                m: function(v){
                    this.km = parseInt(v)/1000;
                },
                // v指的是km变量
               km: function(v){
                    this.m = parseInt(v)*1000;
                }
              }
          })
        </script>
  </head>
  <body>
  </body>
</html>

2.监听属性

2.1语法

监听属性 watch，我们可以通过 watch 来响应数据的变化

watch:{}

2.2实例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
     <!-- 1.导入vue在线依赖-->
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
  <script  src="js/date.js"></script>
    <title>监听属性</title>
    <!-- 2.定义vue所管理的边界（有且只有一个根节点） -->
      <script src="date.js" type="text/javascript" charset="utf-8"></script>
        <body>
          <!-- 定义边界 -->
        <div id="app">
              单价：<input v-model="price">
              数量：<input v-model="num">
              总价：<input v-model="count">
            </div>
          <script type="text/javascript">
            new Vue({
              el: '#app',
              data(){
                return{
                  price:20,
                  num:1
                }
              },
               computed:{
                 count:function(){
                   return this.price*this.num
                 }
               }
            })
          </script>
  </head>
  <body>
  </body>
</html>

5.购物车（通过Vue实现）

1.最基础代码购物车

通过纯js代码实现，没有借助其他框架代码

<!DOCTYPE html>
<html>
<head>
    <title>Shopping Cart</title>
    <style>
        /* CSS 样式可以根据需求自行设计 */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
        }
        h1 {
            text-align: center;
        }
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            padding: 10px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }
        tr:hover {
            background-color: #f5f5f5;
        }
        .total {
            font-weight: bold;
            text-align: right;
        }
        .quantity-input {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .quantity-btn {
            cursor: pointer;
            background-color: #ddd;
            border: none;
            font-size: 1.2rem;
            padding: 4px;
        }
        .checkout-btn {
            display: block;
            margin-top: 20px;
            text-align: right;
        }
    </style>
</head>
<body>
    <h1>Shopping Cart</h1>
 <table>
     <thead>
         <tr>
             <th>商品名字</th>
             <th>商品图片</th>
             <th>商品价格</th>
             <th>增加商品</th>
             <th>删除商品</th>
         </tr>
     </thead>
     <tbody>
         <tr>
             <td>小兵嘎子</td>
             <td><img src="img/微信图片_20230918163623.jpg" width="50" height="50"></td>
             <td class="price">￥19.99</td>
             <td class="quantity-input">
                 <button class="quantity-btn minus">-</button>
                 <input type="number" min="1" value="2">
                 <button class="quantity-btn plus">+</button>
             </td>
             <td class="subtotal">￥39.98</td>
         </tr>
     </tbody>
     <tfoot>
         <tr class="total">
             <td colspan="4">Total:</td>
             <td id="total">$69.95</td><!-- 替换为购物车的真实总额 -->
         </tr>
     </tfoot>
 </table>
    <div class="checkout-btn">
        <button>Checkout</button>
    </div>
    <script>
        const quantityInputs = document.querySelectorAll('.quantity-input input');
        quantityInputs.forEach(input => {
            input.addEventListener('change', updateSubtotal);
        });
        const minusBtns = document.querySelectorAll('.minus');
        const plusBtns = document.querySelectorAll('.plus');
        minusBtns.forEach((btn, index) => {
            btn.addEventListener('click', () => {
                let currentVal = Number(quantityInputs[index].value);
                if (currentVal > 1) {
                    quantityInputs[index].value = currentVal - 1;
                    updateSubtotal();
                }
            });
        });
        plusBtns.forEach((btn, index) => {
            btn.addEventListener('click', () => {
                let currentVal = Number(quantityInputs[index].value);
                quantityInputs[index].value = currentVal + 1;
                updateSubtotal();
            });
        });
        function updateSubtotal() {
            const prices = document.querySelectorAll('.price');
            const quantities = document.querySelectorAll('.quantity-input input');
            const subtotals = document.querySelectorAll('.subtotal');
            let total = 0;
            for (let i = 0; i < prices.length; i++) {
                const price = Number(prices[i].textContent.slice(1));
                const quantity = Number(quantities[i].value);
                const subtotal = price * quantity;
                subtotals[i].textContent = '$' + subtotal.toFixed(2);
                total += subtotal;
            }
            document.querySelector('#total').textContent = '$' + total.toFixed(2);
        }
    </script>
</body>
</html>

1.2效果展示

2.通过Vue来实现购物车功能

2.1.代码

小编，使用Vue.js和jQuery库实现。用户可以通过增加或减少商品的数量来调整购物车中商品的数量，同时总计费用会实时更新。

在Vue实例中，小编定义了一个items数组，每个元素代表一个商品对象，包含了商品名字、图片路径、价格和数量，总计属性。calculateSubtotal方法用于计算每个商品的小计，calculateTotal方法用于计算购物车的总计。

页面中使用了Vue的数据绑定和事件监听，当用户点击增加或减少数量按钮时，会触发对应的Vue方法来更新商品数量，并重新计算小计和总计。最终，页面会根据数据的变化进行实时回显。

<!DOCTYPE html>
<html>
<head>
    <title>Shopping Cart</title>
    <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>
    <style>
        /* CSS 样式可以根据需求自行设计 */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
        }
        h1 {
            text-align: center;
        }
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            padding: 10px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }
        tr:hover {
            background-color: #f5f5f5;
        }
        .total {
            font-weight: bold;
            text-align: right;
        }
        .quantity-input {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .quantity-btn {
            cursor: pointer;
            background-color: #ddd;
            border: none;
            font-size: 1.2rem;
            padding: 4px;
        }
        .checkout-btn {
            display: block;
            margin-top: 20px;
            text-align: right;
        }
    </style>
</head>
<body>
    <div id="app">
        <table>
            <thead>
                <tr>
                    <th>商品名字</th>
                    <th>商品图片</th>
                    <th>商品价格</th>
                    <th>商品数量</th>
                    <th>商品小计</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item, index) in items" :key="index">
                    <td>{{ item.name }}</td>
                    <td><img :src="item.image" width="50" height="50"></td>
                    <td><input v-model.number="item.price" /></td>
                    <td>
                        <button @click="decrementQuantity(item)">-</button>
                        <input v-model.number="item.quantity" />
                        <button @click="incrementQuantity(item)">+</button>
                    </td>
                    <td>{{ calculateSubtotal(item) }}￥</td>
                </tr>
            </tbody>
            <tfoot>
                <tr class="total">
                    <td colspan="4">总计:</td>
                    <td>{{ calculateTotal() }}￥</td>
                </tr>
            </tfoot>
        </table>
    </div>
    <script type="text/javascript">
        new Vue({
            el: '#app',
            data() {
                return {
                    items: [
                        { 
                            name: '小兵嘎子',
                            image: 'img/微信图片_20230918163623.jpg',
                            price: 9.9,
                            quantity: 1
                        },
                        {
                            name: '小彪子',
                            image: 'img/微信图片_20230918163616.jpg',
                            price: 19.9,
                            quantity: 1
                        }
                    ]
                }
            },
            methods: {
                incrementQuantity(item) {
                    item.quantity++;
                },
                decrementQuantity(item) {
                    if (item.quantity > 1) {
                        item.quantity--;
                    }
                },
                calculateSubtotal(item) {
                    return (item.price * item.quantity).toFixed(2);
                },
                calculateTotal() {
                    let total = 0;
                    for (let i = 0; i < this.items.length; i++) {
                        total += this.items[i].price * this.items[i].quantity;
                    }
                    return total.toFixed(2);
                }
            }
        })
    </script>
</body>
</html>

你不能不了解的Vue【模板语法上集】!

一.Vue插值

1.文本

2.html样式渲染

3.表达式

4.源码

二.插值

1.源码

2.v-if

2.v-if 和v-show区别

3.变量数据以及下拉框和

三.过滤器

1.局部过滤器

1.1语法

1.2实例

1.3效果展示

2.全局过滤器

2.1语法

2.2实例

2.3效果图

四.计算属性&监听属性

1.计算属性

1.1语法

1.2实例

2.监听属性

2.1语法

2.2实例

5.购物车（通过Vue实现）

1.最基础代码购物车

1.2效果展示

2.通过Vue来实现购物车功能

2.1.代码

2.2展示

热门文章

最新文章

相关课程

相关电子书

探索云世界

热门

云计算

大数据

云原生

人工智能

数据库

开发与运维

活动广场

任务中心

训练营

直播

乘风者计划

下载

镜像站

技术资料

你不能不了解的Vue【模板语法上集】!

一.Vue插值

1.文本

2.html样式渲染

3.表达式

4.源码

二.插值

1.源码

2.v-if

2.v-if 和v-show区别

3.变量数据以及 下拉框和

三.过滤器

1.局部过滤器

1.1语法

1.2实例

1.3效果展示

2.全局过滤器

2.1语法

2.2实例

2.3效果图

四.计算属性&监听属性

1.计算属性

1.1语法

1.2实例

2.监听属性

2.1语法

2.2实例

5.购物车（通过Vue实现）

1.最基础代码购物车

1.2效果展示

2.通过Vue来实现购物车功能

2.1.代码

2.2展示

热门文章

最新文章

相关课程

相关电子书

3.变量数据以及下拉框和