計算されたプロパティ
-
計算されたプロパティ：コードで計算できる変数と同等です。（計算結果を自動的に更新して返します）
-
手順を書く：
-
ステップ1：計算されたプロパティを宣言する:(ロジックコードを記述）、計算されたプロパティで宣言する
-
computed: {
//属性名() { return 返回值 }
total() {
return 0
}
},ステップ2：計算されたプロパティを使用する：正規変数と同じ
{
{total}}ケース：文字列「ABC」->「CBA」を反転（反転）します
<template>
<div>
<!--
split：字符串函数,将字符串按照指定的字符分割成数组
reverse：数组函数，将数组数据反转
join：数组函数，将数组按照指定的字符拼接成字符串
-->
{
{'ABC'.split('').reverse().join('')}}
{
{msg}}
</div>
</template>
<script>
export default {
computed: { //计算属性：可以实时进行计算的变量
msg() {
return 'XYZ'.split('').reverse().join('')
}
},
}
</script>
<style>
</style>ケース2：データ、メソッド、計算された比較、'表示名、2つのテキストボックス、1つは名前、もう1つは名'
<template>
<div>
<!-- 1.1 2个input -->
<input type="text" v-model="firstName">
<input type="text" v-model="secondName">
<!-- 2.2 触发函数 -->
<input type="button" value="显示" @click="exeName"> <br>
fullName : {
{fullName}} <br>
<!-- 3.2 显示结果 -->
fullName2 : {
{fullName2}} <br>
</div>
</template>
<script>
export default {
data() {
return {
// 1.2 两个变量 + 1个变量
firstName: '',
secondName: '',
fullName: ''
}
},
methods: {
// 2.1 声明函数
exeName() {
this.fullName = this.firstName + this.secondName
}
},
computed: {
// 3.1 声明计算属性
fullName2() {
// 格式：姓为'张',名为'三',全称为'张三'
return this.firstName + this.secondName
}
},
}
</script>
<style>
</style>フィルター
-
フィルタ：既存のデータの二次処理です
文法
構文1：引数なし
-
宣言型フィルター（データ/メソッドレベル）
filter: {
过滤器名称(已有数据) {
return 处理结果
}}-
フィルタを使用する
{
{变量 | 过滤器}}構文2：パラメーターがあります
-
宣言型フィルター（データ/メソッドレベル）
filter: {
过滤器名称(已有数据, 变量1,变量2,... ) {
return 处理结果
}
}フィルタを使用する
{
{变量 | 过滤器(参数1,参数2,...) }}場合
ケース1：小数点以下2桁を修正
<template>
<div>
{
{num | parseNum }}
</div>
</template>
<script>
export default {
data() {
return {
num: 123.456
}
},
filters: {
parseNum( value ) {
// 数字保留2位小数
// Number(内容) ：将指定内容转换数字
// toFixed：数字对象函数，按照四舍五入，截取小数位数
return Number(value).toFixed(2)
}
}
}
</script>
<style>
</style>ケース2：小数点以下の桁数を指定する
<template>
<div>
{
{num | parseNum(1) }}
</div>
</template>
<script>
export default {
data() {
return {
num: 123.456
}
},
filters: {
parseNum( value, n ) {
// 数字保留2位小数
// Number(内容) ：将指定内容转换数字
// toFixed：数字对象函数，按照四舍五入，截取小数位数
return Number(value).toFixed(n)
}
}
}
</script>
<style>
</style>リスナー
-
リスナー：データが変更されると、リスナーは対応するイベントをトリガーできます。
文法
構文1：共通変数を監視する
data() {
return {
变量：1
}
},
watch: {
变量() { //data.变量的监听处理函数
}
}構文2：ディープリスニング
data() {
return {
对象变量：{
属性1: 值,
属性2: 值,
}
}
},
watch: {
对象变量: {
handler() {}, //处理函数
deep: true //深度监听，属性值发生变化时，也可以监听
}
}場合
-
通常の変数とオブジェクト変数を聞く
<template>
<div>
msg: <input type="text" v-model="msg"> <br>
username: <input type="text" v-model="user.username">
</div>
</template>
<script>
export default {
data() {
return {
msg: '', //普通变量
user: { //对象遍历
username: ''
}
}
},
watch: {
msg(val, oldValue) { //普通变量的监听处理函数
console.info(`msg : 新值${val} ,旧值${oldValue}`)
},
user: {
handler(val, oldValue) {
console.info(`user : 新值${val.username} ,旧值${oldValue.username}`)
},
deep: true //深度监听
}
},
}
</script>
<style>
</style>ケース：ショッピングカート
必要
達成
-
ステップ：
-
ステップ1：ページ表示（Cart.vue、ルーティング、パス/カート）
-
ステップ2：データを表示する（シミュレートされた製品リスト、v-表示用）、（チェックボックス、価格、時間、合計価格）
-
<template>
<div>
<table border="1">
<tr>
<td>
<input type="checkbox" name="" id="">
</td>
<td>编号</td>
<td>标题</td>
<td>价格</td>
<td>数量</td>
<td>日期</td>
<td>小计</td>
</tr>
<tr v-for="(product,index) in productList" :key="index">
<td>
<input type="checkbox" name="" id="">
</td>
<td>{
{product.pid}}</td>
<td>{
{product.title}}</td>
<td>{
{product.price}}</td>
<td>
<a href="" @click.prevent="product.count--">-</a>
{
{product.count}}
<a href="" @click.prevent="product.count++">+</a>
</td>
<td>{
{product.createDate}}</td>
<td>
<!-- 小计：单价 * 数量 -->
{
{product.price * product.count}}
</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>总计：</td>
<td>
<!-- 总计：所有小计的和 -->
</td>
</tr>
</table>
</div>
</template>
<script>
export default {
data() {
return {
productList: [ //模拟商品数据
{
pid: 'p001',
title: '衣服',
price: '998.45',
count: '9', //购买数量
createDate: '2022-03-07 11:28:45'
},
{
pid: 'p002',
title: '电脑',
price: '9768.76',
count: '10', //购买数量
createDate: '2022-03-07 11:28:45'
}
]
}
},
}
</script>
<style>
</style>ケース：合計を計算する
computed: {
//属性名() { return 返回值 }
total() {
let sum = 0 ;
this.productList.forEach(product => {
// 小计的和
sum += (product.price * product.count)
});
return sum
}
},