計算されたプロパティの基本構造
計算されたプロパティ
計算ロジックのいくつかの属性を書き込むことができます。
通常の関数のように結果を直接返すのではなく、一連の計算を行った後に結果を返します。
同時に、データ内の特定の属性が適用されている限り、この属性が変更されると、計算された属性がこの変更を嗅ぎ分けて自動的に実行できます。
定義: 使用する属性が存在しないため、既存の属性から計算されます。
使用方法: 計算オブジェクトで計算プロパティを定義し、{ {メソッド名}} を使用して計算結果を ページに 表示します。
計算されたプロパティのキャッシュプロパティ
計算されたプロパティが初めて呼び出されるとき、結果が生成され、その結果がキャッシュされ、その後このプロパティが使用されるたびにキャッシュから取得されます。
依存関係が変更されると、再計算して結果を取得し、それをキャッシュします。
<script>
//基本结构
new Vue ({
el:'',
//数据
data:{},
// 方法属性
// 事件绑定，不用return，没有缓存
methods:{},
// 侦听器（重视结构）
// 监听一个值的改变，不用返回值
watch:{
要侦听的数据(){}
},
// 计算属性（重视结果）
// 必须有return，只求结果，有缓存
copputed:{
计算属性名(){
//经过一系列计算
return 处理操作后结果
}
}
})
</script>計算プロパティの基本的な使用法
<div id="アプリ">
<p>元の文字列: { { メッセージ }}</p>
<p>反転された文字列を計算します: { {·reverseMessage·}}</p>
<p>元の文字列を小文字に変換します: { { toLowerCase}}</p >
</div>
<script src="../vue.js"></script>
<スクリプト>
新しいビュー({
アプリ'、
データ：{
メッセージ:「ABCDEFG」
}、
計算:{
// 反転した文字列を計算します
reverseMessage:function(){
// split() は文字列を文字列の配列に分割します
// reverse() は配列内の要素の順序を逆にします
// join() は配列内のすべての要素を文字列に変換します
return this.message.split('').reverse().join('')
}、
//元の文字列を小文字に変換します
toLowerCase(){
//substring(from,to) は、文字列内の指定された 2 つの添え字の間の文字を抽出します。
//toLowerCase() は文字列をトランペットに変換するために使用されます
this.message.substring(0,7).toLowerCase を返す
}
}
})
</script>
計算されたプロパティの完全な構造
1. 計算された各プロパティには、ゲッター関数とセッター関数が含まれます。
2. 計算プロパティはデフォルトでゲッター関数を使用しますが、セッター関数は一般的ではないため、一般的な計算プロパティのゲッターとセッターは記述されません。
3. getter 関数はデフォルトの使用法ですが、setter 関数はデフォルトの使用法ではありません。setter 関数を使用する場合は、setter 関数を手動で書き出す必要があります。
4. setter関数の仮パラメータは変更したい値です
<!-- 准备好一个容器 -->
<div id="app">
姓:<input type="text" v-model="lastName"> <br><br>
名:<input type="text" v-model="firstName"> <br><br>
全名:<span>{
{ fullNamel}</span> <br><br>
<button @click="btn">修改计算属性的值</button>
</div>
<!-- 引入Vue -->
<script src="../vue.js"></script>
<script>
new Vue({
el:'#app',
data(){
return {
firstName:'图图',
lastName:'胡'
}
},
computed:{
fullName:{
// get:获取值时触发
// 当有人读取ful1Name时,get就会被调用,且返回值就作为fullName的值。
get(){
return this.firstName +'_' +this.lastName;
},
//set；设置值时触发
//当计算属性被修改时，调用set
set(value){
console.log('set',value);
const arr = value.split('-')
this.firstName = arr[0]
this.lastName = arr[1]
}
}
},
methods:{
btn(){
this.fullName = '胡英俊'
}
}
})
</script>
2
<スクリプト>
// 1. 宣言文字列
let str = '宇宙の中心 - 江西ソフトウエア職業技術大学';
let str1 = "宇宙の中心 - 江西ソフトウエア職業技術大学";
let str10 = '宇宙の中心 - 江西ソフトウエア職業技術大学';
// 2. 文字列が文字列内にあるかどうかを判断します
let index1 = str.index0f('宇宙')
console.log(index1);//0
// 3. 文字列をインターセプトします (最初のパラメーター: どの添字でインターセプトを開始するか、2 番目のパラメーター: インターセプトの長さ)。
str2 = str.substr(7,2) とします。
console.log(str2); // 江西省
// 4. 文字列を変更します (最初のパラメータ: 変更する文字列、2 番目のパラメータ: 変更された文字列。
let str3 = str.replace("ユニバース","インターネット")
console.log(str3);// インターネットの中心地 -- 江西ソフトウエア職業技術大学
// 5. 文字列を分割する
str4 = "23" とします
// この関数は配列を返さなければなりません
let array = str4.split(',')
// は区切り文字です。区切り文字が見つかると、文字列から削除され、部分文字列の配列が返されます。
// 区切り文字が見つからないか省略された場合、配列には文字列全体から構成される 1 つの要素が含まれます。
// 区切り文字が空の文字列の場合は、str を文字配列に変換します
console.log(array); //['Scatter', "Lang'," Hey', 'Yo']
// 6. 大文字と小文字の変換 (英語のみ大文字と小文字があり、中国語は存在しません)
console.log('ABCDEF'.toLowerCase());// 小文字の abcdef に変換します
console.log('abcdef'.toUpperCase());// 大文字のABCDEFに変換します
console.log('中国語には大文字と小文字が存在しません'.toLowerCase);
</script>
手術
<body>
<script src="./vue.js"></script>
<style>
div#app {
width:250px;
margin: 30px auto;
border: 1px solid □#666;
border-radius:10px;
padding:10px;
}
p {
text-align: center;
}
</style>
</head>
<body>
<div id="app">
<p>
<input type="text" placeholder="猜数字"v-model="gueassed">
</p >
<p>
{
{res}}</p >
</div>
<script>
new Vue({
el: '#app', data:{
gueassed:'',
// 生成随机数0-100
a:Math.floor(Math.random() * 100),},
computed:{
res:{
//当有人读取fantcc，就会调用get，
get() {
const b = this.gueassed * 1;
const a = this.a
if (a == b)
return"恭喜你猜对了"
if (b == 0)
return "请猜一个介于1和100之间的整数";
if (b > a)
return"大了，往大一点猜"
if (b < a)
return"小了，往大一点猜"
},
} }
})
</script>
</body>