ملاحظات تعلم vue.js حول التقييد النمطي للأسلوب والقائمة

数据绑定一个常见需求是操作元素的 class 列表和它的内联样式。因为它们都是 attribute，我们可以用 v-bind 处理它们：只需要计算出表达式最终的字符串。不过，字符串拼接麻烦又易错。因此，在 v-bind 用于 class 和 style 时，Vue.js 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。

一.绑定Class属性。

绑定数据用v-bind:命令，简写成:

语法：<div v-bind:class="{ active: isActive }"></div>。class后面的双引号里接受一个对象字面量/对象引用/数组作为参数，

这里，{active: isActive}是对象参数，active是class名,isActive是一个布尔值。下面是一个例子：

绑定对象字面量

html：

<div id="classBind">
<span :class="{warning:isWarning,safe:isSafe}" v-on:click="toggle">
الحالة:{{alert}}{{isSafe}}
</span>
</div>
//js
var app11=new Vue({
el:'#classBind',
data:{
isWarning:true,
alertList:['التحذير الأحمر','إزالة التحذير'],
alert:''
},
computed:{
isSafe:function(){
return !this.isWarning;
}
},
methods:{
toggle:function(){
this.isWarning=!this.isWarning;
this.alert= this.isWarning?this.alertList[0]:this.alertList[1];
}
}
});

css:

.warning{
color:#f24;
}
.safe{
color:#42b983;
}

عند النقر على نص الحالة، يمكن تغيير النص واللون في الخلفية

//الحالة: إزالة التحذيرtrue

//الحالة: التحذير الأحمرfalse

مرجع الت绑定

يمكن كتابة العنصر الم绑定 هنا في مجال data لـ Vue instance، وفي class="classObj "، يتم استدعاء class في الدوائر المزدوجة هو استدعاء لـ classObj في Vue instance. يمكن وضع classObj في data أو computed، إذا كان في computed، فإن دالة classObj الم对应的 يجب أن تعود دالة مثل ذلك:

js:

var app11=new Vue({
el:'#classBind',
data:{
isWarning:true,
alertList:['التحذير الأحمر','إزالة التحذير'],
alert:''
},
computed: {
isSafe: function () {
return !this.isWarning;
},
classObj:function(){
return {
warning: this.isWarning,
safe:this.isSafe
}
}
},
methods:{
toggle:function(){
this.isWarning=!this.isWarning;
this.alert= this.isWarning?this.alertList[0]:this.alertList[1];
}
}
});

ت绑定 مصفوفة

html:

<div v-bind:class="classArray" @click="removeClass()">إزالة class</div>

js

data: {
classArray:["big",'red"]
}
methods:{
removeClass:function(){
　　this.classArray.pop();
}
}

css:

.big{
font-size:2rem;
}
.red{
color:red; 
}

النتيجة، عند النقر على إزالة class، يتم استدعاء دالة removeClass، لإزالة آخر عنصر من مصفوفة classArray، في المرة الأولى، يتم إزالة 'red'، ويغير لون النص من الأحمر إلى الأسود، عند النقر مرة أخرى، يتم إزالة 'big'، ويصبح حجم النص أصغر.

الجزء الثاني: ربط النمط المدمج

في هذه اللحظة، أنا أرى هذا الصفحة بجانب دليل API Vue الخاص بي، وأنا أبيع هنا، شعور التباهي رائع o(^▽^)o

html

<div id="styleBind">
<span :style="{color:theColor,fontSize:theSize+'px'}" @click="bigger">styleBind</span>
</div>

css

هذا لا يتطلب css...،

js

var app12=new Vue({
el:'#styleBind',
data:{
theColor:'red',
theSize:14
},
methods:{
bigger:function(){
this.theSize+=2;
}
}
});

إضافة إلى إدخال كائنات السطح، يمكن أيضًا إدخال إشارات كائنات وعدد لـ V-bind:style

ما تم ذكره أعلاه هو ملاحظات تعلم vue.js التي قدمها المحرر للجميع، نأمل أن تكون مفيدة لكم، إذا كان لديكم أي أسئلة، فلا تترددوا في ترك تعليق، وسأقوم بالرد على الوقت المناسب. وأنا أتمنى أيضًا أن أتقدم بجزيل الشكر للجميع على دعم موقع呐喊 التعليمي!

البيان: محتوى هذا المقال تم جمعه من الإنترنت، ملكية المادة تتبع صاحب الحقوق، المحتوى تم إدراجه من قبل المستخدمين عبر الإنترنت، ويحمل الموقع حقوق الملكية، لم يتم تعديل المحتوى بشكل يدوي، ولا يتحمل الموقع أي مسؤولية قانونية. إذا رأيت محتوى يشتبه في انتهاك حقوق النسخ، فيرجى إرسال بريد إلكتروني إلى: notice#oldtoolbag.com (عند إرسال البريد الإلكتروني، يرجى استبدال # ب @) لتقديم الشكوى، ويجب تقديم الدليل الداعم، وإذا تم التحقق من ذلك، فإن الموقع سيزيل المحتوى المزعوم بشكل فوري.