做网站具体流程,公司做的局域网网站怎么登陆,低价建设手机网站,wordpress分类自定义字段1、:class 指令
在 Vue.js 中#xff0c;:class 指令#xff08;或 v-bind:class#xff09;允许你动态地绑定 CSS 类到一个元素。这个指令有两种主要的使用方式#xff1a;绑定一个对象或者绑定一个数组。
1.1、:class{} 对象语法
对象语法允许你基于条件来添加或移除类…1、:class 指令
在 Vue.js 中:class 指令或 v-bind:class允许你动态地绑定 CSS 类到一个元素。这个指令有两种主要的使用方式绑定一个对象或者绑定一个数组。
1.1、:class{} 对象语法
对象语法允许你基于条件来添加或移除类。对象的键是类名值是一个布尔值表示是否应该应用该类。
div :class{ active: isActive, text-danger: hasError }/div 当 isActive 为 true 时类 active 会被应用。 当 hasError 为 true 时类 text-danger 会被应用。
1.2、:class[] 数组语法
数组语法允许你将多个类作为一个数组传递。可以是字符串数组或对象数组。
div :class[static-class, isActive ? active : , { text-danger: hasError }]/div ‘static-class’ 始终会被应用。 当 isActive 为 true 时类 active 会被应用否则为空字符串。 当 hasError 为 true 时类 text-danger 会被应用。
2、watch
watch 监听单个数据键就是那个你要监听的那个家伙值可以是函数当你监控的家伙发生变化时需要执行的函数这个函数有两个形参第一个是当前值新的值第二个是更新前的值旧值。 div idappp{{num}}/pbutton clicknum点击加一/button/divlet vm new Vue({el:#app,data:{num:0},watch:{// 当前值已经改变的值newval 旧值 oldvalnum:function(newval,oldval){console.log(新值是newval);console.log(旧值是oldval);}}})3、v-show
v-show指令可以用来动态的控制DOM元素的显示或隐藏。v-show后面跟的是判断条件语法如下
v-show判断变量v-show“true”表示显示DOM元素。 v-show“false” 表示隐藏DOM元素。
div idappimg srcimg/1.jpg v-showisShow,age18 input typebutton value切换显示状态 clickchangeIsshow
/divscript
//创建vue实例
var app new Vue({el:#app,data:{isShow:false,age:19},methods:{changeIsshow:function () {this.isShow !this.isShow;}},
})
/script
