Vue基础语法【下】

最新推荐文章于 2023-10-30 16:27:26 发布
最新推荐文章于 2023-10-30 16:27:26 发布
阅读量220 收藏
点赞数 1
分类专栏： # Vue.js 文章标签： vue html web 前端 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41697230/article/details/117031559
版权

上接Vue基础语法【上】。

10.阶段性案例 - 图书购物车

10.1.界面的搭建（代码）

10.1.1.html代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="main.js">
</head>
<body>

  <div id="app">
  <table>
    <thead>
    <tr>
      <th></th>
      <th>书籍名称</th>
      <th>出版日期</th>
      <th>价格</th>
      <th>购买数量</th>
      <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr v-for="book in books">
<!--      这里不使用td v-for的原因是，某些列需要加进button-->
<!--      <td v-for="value in book">{{value}}</td>-->
      <td>{{book.id}}</td>
      <td>{{book.name}}</td>
      <td>{{book.date}}</td>
      <td>{{book.price}}</td>
      <td>
        <button>-</button>
        {{book.count}}
        <button>+</button>
      </td>
      <td>
        <button>移除</button>
      </td>
    </tr>
    </tbody>
  </table>
  </div>
<!--因为是用vue来写整个案例，所以js文件的引入顺序不能错-->
  <script src="../js/vue.js"></script>
  <script src="main.js"></script>


</body>
</html>

10.1.2.js代码

const app = new Vue({
  el: '#app',
  data: {
    books: [
      {
        id: 1,
        name: '灵笼美术设定集',
        date: '2020-11',
        price: 89,
        count: 1
      },
      {
        id: 2,
        name: '代码大全',
        date: '2006-9',
        price: 59,
        count: 1
      },
      {
        id: 3,
        name: '现代操作系统',
        date: '2015-2',
        price: 79,
        count: 1
      },
      {
        id: 4,
        name: 'Unix编程艺术',
        date: '2009-8',
        price: 77,
        count: 1
      }
    ]
  }
})

10.1.3.css代码

table {
  border: 1px solid #e9e9e9;
  border-collapse: collapse;
  border-spacing: 0;
}

th, td {
  padding: 8px 16px;
  border: 1px solid #e9e9e9;
  text-align: left;
}

th {
  background-color: #f7f7f7;
  color: #5c6b77;
  font-weight: 600;
}

10.1.4.效果图

image-20210519141727129

10.2.过滤器的使用

细节处理之小数点的处理

js里面给数字保留两位小数：数字.toFixed

由于，商品的单价常常都不是整数价格，经常小数点后面还会有小数，而且，一般情况下，如果小数点后面是.00

,那么在浏览器里就会以整数的形式去显示，这样很不符合用户需求，所以需要对商品单价的显示进行处理。

10.2.1.html的修改

<tr v-for="book in books">
<!--  这里不使用td v-for的原因是，某些列需要加进button-->
<!--  <td v-for="value in book">{{value}}</td>-->
      <td>{{book.id}}</td>
      <td>{{book.name}}</td>
      <td>{{book.date}}</td>
<!--  保留两位小数-->
<!--  币种符号的拼接方式可复用性并不强-->
<!--  <td>{{'￥' + price.toFixed(2)}}</td>-->
<!--  可以采用methods的方式增强可复用性-->
<!--  <td>{{getFinalPrice(book.price)}}</td>-->
<!--  还可以采用过滤器来过滤显示-->
      <td>{{book.price | showPrice}}</td>

      <td>
        <button>-</button>
        {{book.count}}
        <button>+</button>
      </td>
      <td>
        <button>移除</button>
      </td>
    </tr>

10.2.2.js的修改

// methods:{
  //   getFinalPrice(price){
  //     return '￥' + price.toFixed(2)
  //   }
  // },
  filters:{
    showPrice(price){
      return '￥' + price.toFixed(2)
    }

10.2.3.效果图

image-20210519143504146

10.3.改变购买数量

按照正常逻辑来讲，商品的数量是不可能低于0个以下的，而且如果商品数量为0个的时候，这时商品应该是不在购物车里的，所以要限制商品的数量≥1个。而商品的移除交给移除按钮来操作。

10.3.1.html的修改

<!--        通过动态绑定button的disable属性来控制商品数量的下限-->
        <button @click="decrement(index)" :disabled="book.count <= 1 ">-</button>

10.3.2.js的修改

methods:{
    // getFinalPrice(price){
    //   return '￥' + price.toFixed(2)
    // },
    decrement(index) {
      this.books[index].count--
    },
    increment(index) {
      this.books[index].count++
    }
  },

10.4.移除按钮以及最终价格的显示

🔴移除按钮注意点：

  1. 当购物车内没有商品的时候应该有一定的提示；
  2. 且在购物车有东西的时候该提示不应该存在，也就是动态显示购物车状态。

🔴商品总价的注意点：

  1. 总价这类东西用计算属性最好，到后面可以用reduce来计算更加简单；
  2. 总价的显示应该也是动态的；
  3. 总价的格式最好也有保留几位小数的规定。

10.4.1.html代码

<div id="app">
  <div v-if="books.length">
    <table>
      <thead>
      <tr>
        <th></th>
        <th>书籍名称</th>
        <th>出版日期</th>
        <th>价格</th>
        <th>购买数量</th>
        <th>操作</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="(book, index) in books">
        <!--  这里不使用td v-for的原因是，某些列需要加进button-->
        <!--  <td v-for="value in book">{{value}}</td>-->
        <td>{{book.id}}</td>
        <td>{{book.name}}</td>
        <td>{{book.date}}</td>
        <!--  保留两位小数-->
        <!--  币种符号的拼接方式可复用性并不强-->
        <!--  <td>{{'￥' + price.toFixed(2)}}</td>-->
        <!--  可以采用methods的方式增强可复用性-->
        <!--  <td>{{getFinalPrice(book.price)}}</td>-->
        <!--  还可以采用过滤器来过滤显示-->
        <td>{{book.price | showPrice}}</td>

        <td>
          <!--        通过动态绑定button的disable属性来控制商品数量的下限-->
          <button @click="decrement(index)" :disabled="book.count <= 1 ">-</button>
          {{book.count}}
          <button @click="increment(index)">+</button>
        </td>
        <td>
          <button @click="removeHandler">移除</button>
        </td>
      </tr>
      </tbody>
    </table>
    <h2>总价格：{{totalPrice | showPrice}}</h2>
  </div>
  <h2 v-else>购物车为空</h2>
</div>

10.4.2.js代码

methods:{
    // getFinalPrice(price){
    //   return '￥' + price.toFixed(2)
    // },
    decrement(index) {
      this.books[index].count--
    },
    increment(index) {
      this.books[index].count++
    },
    removeHandler(index){
      this.books.splice(index, 1)
    }
  },
  computed:{
    totalPrice(){
      let totalPrice = 0
      for(let i = 0; i < this.books.length; i++){
        totalPrice += this.books[i].price*this.books[i].count
      }
      return totalPrice
    }
  },

10.4.3.效果图

image-20210519152505048

10.4.4.高阶函数的使用

编程范式：命令式编程和声明式编程

编程范式：面向对象编程（一等公民→对象）、函数式编程（一等公民→函数）

首先，我们拿一个案例来比较：

const nums = [10, 30, 40, 50, 89, 100, 789]

假设对这对数组提出以下的处理要求：

  1. 取出小于100的数字并在控制台输出
  2. 所有小于100的数字*2之后逐个输出
  3. 将2.中所有的数字相加，并输出

😑通常的做法

  1. 取出小于100的数字并在控制台输出

    let newNums = []
for (let n of nums) {
  if (n < 100) {
    newNums.push(n)
  }
}
console.log(newNums)

  2. 所有小于100的数字*2之后逐个输出

    let newNums2 = []
for (let n of nums) {
  if (n < 100) {
    newNums2.push(n * 2)
  }
}
console.log(newNums2)

  3. 将2.中所有的数字相加，并输出

    let total = 0
for (let n of nums) {
  total += n
}
console.log(total)

😲高阶函数

  1. 取出小于100的数字并在控制台输出

    // filter函数的使用
// filter中的回调函数有一个要求，必须返回一个Boolean值
// 当返回true时，函数内部会有自动将这次回调的n加入到新的数组中
// 当返回false时，函数内部会过滤掉这次的n
let newNums3 = nums.filter(function (n) {
  // return true
  return 111 < 100
  // return n < 100
})
console.log(newNums3)

  2. 所有小于100的数字*2之后逐个输出

    // map函数的使用
let newNums4 = nums.map(function (n) {
  return n * 2
})
console.log(newNums4);

  3. 将2.中所有的数字相加，并输出

    // reduce函数的使用
// 对数组中所有的的内容进行汇总
// preValue是上一个返回的值
let total2 = nums.reduce(function (preValue, n) {
  return preValue + n
}, 0)
// 0是preValue最开始的默认值
console.log(total2);

    对于reduce()函数的示例的解析呢，如下：

    第一次：preValue 0 n 10
第二次：preValue 10 n 30
第三次：preValue 40 n 40
第四次：preValue 80 n 50
第五次：preValue 130 n 89
第六次：preValue 219 n 100
第七次：preValue 319 n 789

🔗接下来是链式函数的使用：

let total3 = nums.filter(function (n) {
  return n < 100
}).map(function (n) {
  return n * 2
}).reduce(function (preValue, n) {
  return preValue + n
})
console.log(total3);

😉此外，还可以用=>——ES6中的arrow function，来简化链式函数的使用：

let total4 = nums.filter(n => n < 100).map(n => n * 2).reduce((preValue, n) => preValue + n)
console.log(total4);

有了上面的例子使用，就可以用高阶函数来简化购物车总价格的计算，替换掉原来的循环求总价格：

let totalPrice = 0
// 1.普通的for循环
for(let i = 0; i < this.books.length; i++){
totalPrice += this.books[i].price*this.books[i].count
}

// 2.for (let i in this.books)
for (let i in this.books) {
console.log(i)
totalPrice += this.books[i].price * this.books[i].count
// const book = this.books[i]
// totalPrice += book.price*book.count
}

// 3.for(let item of this.books)
for (let item of this.books) {
totalPrice += item.price * item.count
}

return totalPrice
⬇⬇⬇ 
// 高阶函数reduce的使用
return this.books.reduce(function (preValue, book) {
	return preValue + book.price * book.count
}, 0)

11.v-model

11.1.v-model的基本使用

💛Vue通过v-model实现双向绑定

表单控件在实际开发中是非常常见的，尤其是用户信息的提交，需要大量的表单。

Vue中使用v-model指令来实现表单元素和数据的双向绑定。

下面给出一个v-model的简单案例：

<div id="app">
  <input type="text" v-model="message">
{{message}}
</div>

<script src="../js/vue.js"></script>
<script type="text/javascript">
  const app = new Vue({
    el: '#app',
    data: {
      message: 'Hello, world!',

    },
  })
</script>

image-20210529213655538

image-20210529213708185

针对案例的简单解析：

  • 当在输入框输入内容时，因为input中的v-model绑定了message，所以会实时将输入的内容传递给message，message发生改变
  • 当message发生改变，因为上面使用mustache语法，将message的值插入到DOM中，所以DOM会有响应式改变
  • 至此，通过v-model实现了数据的双向绑定

⭐当然，也可以将v-model用于textarea标签

<textarea v-model="message"></textarea>
<p>输入的内容是：{{message}}</p>

11.2.v-model的原理

简要解析：v-model实际上可以看成是v-bind指令和v-on指令的结合

  1. v-bind绑定一个value属性
  2. v-on指令给当前元素绑定input事件
<input type="text" v-model="message">
等同于
<input type="text" v-bind:value="message" v-on:input="message = $event.target.value">

示例详解：

<div id="app">
<!--  <input type="text" v-model="message">-->
	<h2>{{message}}</h2>
<!--  v-model相当于两个指令的结合——v-bind动态绑定属性和v-on事件绑定-->
<!--  <input type="text" :value="message" @input="valueChange">-->
<!--  input标签的input事件-->
  <input type="text" :value="message" @input="message = $event.target.value">

</div>

<script src="../js/vue.js"></script>
<script type="text/javascript">
	const app = new Vue({
		el: '#app',
		data: {
			message: 'Hello, world!',

		},
    methods:{
		  // 一旦界面上产生了一个事件，浏览器会生成一个event对象，所以可以通过event对象来获取在input中输入的值
		  valueChange(event){
		    this.message = event.target.value
      }
    }
	})
</script>

效果：

image-20210529214621206

image-20210529214626265

11.3.v-model和radio的使用

<div id="app">
<!--  加上name可以让两个单选框互斥，有v-model="sex"之后也可以实现互斥-->
  <label for="male">
    <input type="radio" id="male" value="男" v-model="sex">男
  </label>
  <label for="female">
    <input type="radio" id="female" value="女" v-model="sex">女
  </label>
  <h2>您选择的性别是：{{sex}}</h2>
</div>

<script src="../js/vue.js"></script>
<script type="text/javascript">
	const app = new Vue({
		el: '#app',
		data: {
			message: 'Hello, world!',
      sex: '男'
		},
	})
</script>

在这里插入图片描述
在这里插入图片描述

11.4.v-model结合checkbox

  1. 简单模拟用户同意协议才能点击下一步
  2. 模拟用户多选选项，以便之后提交表单，服务器可以收到用户提交的数据
<div id="app">
  <!--  1.checkbox单选框-->
  <!--  label的for属性绑定了input的id之后，点击label的文本就可以触发控件checkbox-->
    <label for="agree">
      <input type="checkbox" id="agree" v-model="isAgree">同意协议
    </label>
    <h2>您选择的是：{{isAgree}}</h2>
    <button :disabled="!isAgree">下一步</button>
  <br><br>

  <!--  2.checkbox多选框-->
  <!--    value用于之后获取文字，并不是用来显示的-->
  <input type="checkbox" value="篮球" v-model="hobbies">篮球
  <input type="checkbox" value="足球" v-model="hobbies">足球
  <input type="checkbox" value="乒乓球" v-model="hobbies">乒乓球
  <input type="checkbox" value="羽毛球" v-model="hobbies">羽毛球
  <h2>您的爱好是：{{hobbies}}</h2>
</div>

<script src="../js/vue.js"></script>
<script type="text/javascript">
  const app = new Vue({
    el: '#app',
    data: {
      message: 'Hello, world!',
      isAgree: false, // 单选框
      hobbies: [] //多选框
    },
  })
</script>

在这里插入图片描述
在这里插入图片描述

11.5.v-mdoel结合select

  1. 实现用户打开下拉单选框，选择一项，以期用户在向服务器提交表单时，服务器可以获得用户提交的数据
<div id="app">
  <!--1.选择一个,单选下拉列表-->
  <select name="ABC" id="" v-model="fruit">
    <option value="苹果🍎">苹果🍎</option>
    <option value="香蕉🍌">香蕉🍌</option>
    <option value="猕猴桃🥝">猕猴桃🥝</option>
    <option value="葡萄🍇">葡萄🍇</option>
    <option value="橙子🍊">橙子🍊</option>
  </select>
  <h2>您选择的水果是：{{fruit}}</h2>
</div>

<script src="../js/vue.js"></script>
<script type="text/javascript">
  const app = new Vue({
    el: '#app',
    data: {
      message: 'Hello, world!',
      fruit: '',
      fruits: [],
    },
  })
</script>
  1. 当用户需要多选选项时，怎么解决？
  • 给select标签添加mutiple属性（无需为属性赋值），const类型app常量中，data属性添加子属性fruits数组，赋值为空
  • 用户按住CTRL并单击下拉列表选项，即可多选
<select name="ABC" id="" v-model="fruits" multiple>

fruits: [],

在这里插入图片描述

11.6.input中的值绑定

何为input的值绑定？

  • 动态的给input中的value赋值

在本章的前面几个小节中，定义input的时候，value都是直接给定的。

但是在实际的项目开发中，input的值可能是从网络获取或者直接定义在data属性里的。

因此可以通过v-bind:value动态地绑定value值。

所以input中的值绑定也就是👉v-bind在input中的应用。

<div id="app">
  <!--  1.checkbox单选框-->
  <!--  label的for属性绑定了input的id之后，点击label的文本就可以触发控件checkbox-->
  <label for="agree">
    <input type="checkbox" id="agree" v-model="isAgree">同意协议
  </label>
  <h2>您选择的是：{{isAgree}}</h2>
  <button :disabled="!isAgree">下一步</button>
  <br><br>

  <!--  2.checkbox多选框-->
  <!--    value用于之后获取文字，并不是用来显示的-->
  <input type="checkbox" value="篮球" v-model="hobbies_0">篮球
  <input type="checkbox" value="足球" v-model="hobbies_0">足球
  <input type="checkbox" value="乒乓球" v-model="hobbies_0">乒乓球
  <input type="checkbox" value="羽毛球" v-model="hobbies_0">羽毛球
  <h2>您的爱好是：{{hobbies_0}}</h2>

  <!--  input的值绑定-->
  <!--  添加label标签的作用：可以使得用户点击复选框之后文本也可以选中复选框-->
  <label :for="item" v-for="item in originHobbies">
    <input type="checkbox" :id="item" :value="item" v-model="hobbies_1">{{item}}
  </label>
  <h2>您的爱好是：{{hobbies_1}}</h2>
</div>

<script src="../js/vue.js"></script>
<script type="text/javascript">
  const app = new Vue({
    el: '#app',
    data: {
      message: 'Hello, world!',
      isAgree: false, // 单选框
      hobbies_0: [], //多选框
      hobbies_1: [],
      originHobbies: ['篮球', '足球', '羽毛球', '乒乓球', '高尔夫球', '台球']
    },
  })
</script>

在这里插入图片描述

11.7.v-model的修饰符

<!--	1.lazy修饰符-->
<!--  lazy修饰符的作用：使得只有input失去焦点时，数据才会实现双向绑定-->
<input type="text" v-model.lazy="message">
<h2>{{message}}</h2>
<!--  2.number修饰符-->
<input type="text" v-model="age_0">type="text" v-model
<h2>{{age_0}} - {{typeof age_0}}</h2>
<input type="number" v-model="age_1">type="number" v-model
<h2>{{age_1}} - {{typeof age_1}}</h2>
<input type="number" v-model.number="age_2">type="number" v-model.number
<h2>{{age_2}} - {{typeof age_2}}</h2>
<!--  3.trim修饰符-->
<input type="text" v-model.trim="name">
<h2>{{name}}</h2>

const app = new Vue({
  el: '#app',
  data: {
    message: 'Hello, world!',
    age_0: 0,
    age_1: 0,
    age_2: 0,
    name: '',
  },
})

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SbMGRSCb-1623245953887)(https://i.loli.net/2021/06/09/JjT8PeBM3Xslfd4.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hDlFWHwa-1623245953888)(https://i.loli.net/2021/06/09/LBI7R58WopfP9HC.png)]

  1. lazy修饰符使得input只有在失去焦点的时候，数据才能够实现双向绑定中的input数据绑定到data中
  2. 可以看到在type = "text"，v-model没有修饰符的情况下，即便age_0的初始数据类型为number，但当用户修改了input中的值时，实现数据双向绑定的过程时，age_0的数据类型变成了string。这是某些项目开发中是不合符需求的。
  3. 即便type = "number"，v-model仍然没有修饰符的情况下，age_1的初始数据类型为number，但当用户修改了input中的值时，实现数据双向绑定的过程时，age_1的数据类型变成了string，也就是说type等于何值对v-model会将绑定的数据值自动变为string这一点没有任何影响。
  4. 当v-model.number时，数据的双向绑定不会影响age_2的数据类型。
柒柒星球
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
java decrementer,VS Code插件Vue2 代码补全工具
weixin_35572076的博客
03-13 106
第一个Shader的更新，增加爆光度， 属性改为数值型(更直观，精确&rpar;Shader "Castle/ColorMix" { Properties { // 基本贴图 _MainTex ("Texture Image", 2D) = ...thinkphp 行为扩展网站程序在运行的过程每个过程都可以看做是一种行为,例如:运行应用,加载类,执行方法,加载模板,解析模板等,也就是说,我...
图书管理练习（Vue 基础练习 ）
TKOP_的博客
04-30 3792
这是在学习 Vue 的模板语法和常用特性后自己敲的一个小练习。目的是避免眼高手低，做到掌握 Vue 的基本使用。其中涉及大部分的基本模板语法和常用特性。
【vue】关于获取计算总价格的3种循环
qq_44897899的博客
10-27 827
总价格（书本单价×书本数量） html <div id="table"> <!--如果该数组仍存在长度，则显示v-if内的内容--> <div v-if="books.length"> <table> <thead> <!--只有一行 tr--> <tr>
vue实现图书遍历
最新发布
m0_53951384的博客
10-30 71
和数组元素删除操作，注意。方法并不会改变原数组。
42-图书购物车案例-事件完成
jolinoy的博客
07-02 151
最终效果如下图： 完整代码如下：
vue基础语法练习源码
12-09
在这个名为"vue基础语法练习源码"的资源中，我们将会探索一些Vue的基础概念和语法，包括HTML文件中的Vue应用实践，如过滤器、自定义插件以及列表渲染等。 首先，让我们深入了解Vue的基础语法。Vue实例是整个应用的...
一、vue基础语法（轻松入门vue）
01-08
Vue基础语法一、HelloWord二、MVVM设计思想三、指令1. v-cloak2. v-text3. v-html4. v-show4. v-pre5. v-once6. v-model7. v-on事件修饰符按键修饰符自定义按键修饰符8. v-bindclass样式绑定style样式绑定9. v-if、v...
从Vue基础语法入手
08-10
本教程将从Vue的基础语法开始，逐步深入，帮助你理解这个强大的工具在实际项目中的应用。 首先，我们从Vue的基本结构说起。一个基本的Vue实例包含`<template>`、`<script>`和`<style>`三个部分。`<template>`用于...
前端框架Vue基础语法笔记
01-20
Vue基础语法笔记 本笔记主要涵盖了Vue基础语法的知识点，包括创建Vue实例、数据绑定、事件绑定、循环和数据双向绑定、组件化等方面的内容。 一、创建Vue实例 在Vue中，创建一个实例需要使用Vue.createApp()方法，...
vue语法.rar
08-16
二、Vue的数据驱动---mvvm模式的介绍 Vue是一款轻量级的渐进式前端框架，主要功能： 1、模板渲染/数据同步 2、组件化、模块化 3、扩展功能：路由 等等 Vue资源： 中文官网：https://cn.vuejs.org/ Github源码...
Vue 常用特性
Ulrica_Amaris的博客
03-28 174
常用特性 概览 ⚫ 表单操作 ⚫ 自定义指令 ⚫ 计算属性 ⚫ 侦听器 ⚫ 过滤器 ⚫ 生命周期 表单操作 ⚫ Input 单行文本 ⚫ textarea 多行文本 ⚫ select 下拉多选 ⚫ radio 单选框 ⚫ checkbox 多选框 <body> <div id="app"> <form action="http://itcast.cn"> <div> <span>姓名：</span&gt
Vue基础知识总结 3：vue常用标签
热门推荐
学Java，找哪吒
07-19 2万+
一、计算属性 1、合并两个字符串 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app">{{fullName}}</div> <script src="../js/vue.js">&.
购物车案例的实现
weixin_54327001的博客
11-23 368
最终效果： 用于计算最终价格，对此计算使用计算属性最佳原理是遍历books中的每一个属性，价格*数量 2.过滤器 使每个出现数字的地方自动加上小数点，以及￥一旦设置完毕，使用非常方便 按钮动态绑定disabled属性，当数量为1时不可再减少，此时禁用减号按钮 4.v-if/v-else 当所有书都被移除时，显示购物车为空即只有书的种类不为空（length>=1）时渲染元素当为空是显示购物车为空 5.v-on 当点击按钮时，书的数量变化当点击移除时，去掉书的这一行
vue（购物车案例）
lbs311709000127的博客
11-25 174
css代码 <style> table{ border: 1px solid #e9e9e9; border-collapse: collapse; border-spacing: 0; } th ,td{ padding: 8px 16px; border: 1px solid #e9e9e9; text-a...
简化版图书管理系统加减移除
爬楼梯的前端小白的博客
07-19 93
可以实现加减数量 计算总价 移除书籍 移除全部书籍之后 显示v-else “购物车为空 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue</title> <script src="js/vue.js"></script> <style> </style> </head> <...
Vue 动态路由的实现(后台传递路由，前端拿到并生成侧边栏)
weixin_34220963的博客
06-28 5843
地狱空荡荡，师兄在土创。虽然土，但是可以疗伤。 前言 vue项目实现动态路由的方式大体可分为两种:1.前端这边把路由写好，登录的时候根据用户的角色权限来动态展示路由，(前端控制路由)详情可参阅花裤衩大佬的项目手把手...,我当时看这个项目看了好久才明白一点逻辑，因为大神的动态路由那里有好多层判断，并且穿插各种vuex，把小白的我都快搞懵逼...
vue3.0使用mui
li1375603382的博客
04-18 1344
1.下载mui 1.去mui的github https://github.com/dcloudio/mui点击clone or download下载.zip格式的包，解压后dist文件夹有css，js，fonts文件 2.使用hbuilderX 2.在vue项目public新建文件如下 3.在main.js引入 import Vue from 'vue' import App fr...
Vue购物车简单操作，高阶函数
weixin_43475244的博客
04-10 150
<div class="hello"> <div v-if="books.length"> <table> <thead> <tr> <th></th> <th>书籍名称</th> ...
Vue简单实现购物车（笔记）
L_melody的博客
06-28 182
Vue简单实现购物车： html部分： <div id="app"> <div v-if="books.length > 0"> <table class="pure-table pure-table-bordered"> <thead> <tr> <th></th> <th>书籍名称</th> <th>出版时间</th>
vue基本语法讲解.pdf
05-11
Vue是一种流行的JavaScript框架，它具有简单易用的语法和强大的功能，使得构建单页面应用程序变得更加容易。在Vue的项目中，有一些重要的概念需要理解和掌握。 首先，Vue中使用的一些重要概念包括单页面应用程序、...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

柒柒星球

(๑•̀ㅂ•́)و✧给点儿赏赐

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值