1 data当中定义
动态改变title值
- HTML
<!-- 添加 编辑 删除 分配权限(弹出层) -->
<el-dialog :title="titleResult[dialogStatus]"
:visible.sync="dialogVisible" width="50%"
:close-on-click-modal="false" :before-close="handleClose">
<span>这是一段信息</span>
<div v-if="titleResult[dialogStatus]=='分配角色'"></div>//只要点击分配角色才会显示内容
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="btnResult()">确 定</el-button>
</el-dialog>
//:title="titleResult[dialogStatus]" 动态title
//:close-on-click-modal="false" 点击空白区域不会隐藏弹框效果
- JS
data(){
return{
dialogVisible: false,//默认显示隐藏弹框
dialogStatus: '',//添加 编辑/删除弹出的title
titleResult: {
add: "添加",
edit: "编辑",
dele: '删除',
distribution: '分配角色'
},
}
},
methods: {
// 点击添加 编辑 删除 分配
allot(index) {
this.dialogVisible = true;//点击显示弹框
//this.dialogStatus='add'为添加弹框 依次类推
index == 1 ? (this.dialogStatus='add') : (index == 2 ? (this.dialogStatus='edit') : (index == 3 ? (this.dialogStatus='dele') :
(this.dialogStatus='distribution')
))
},
// 添加 编辑 删除 对应弹框确定按钮
PS:这里的判断要用双等不是单等(“==”是等一操作符,判断两边是否相等。)
btnResult(){
if(this.dialogStatus=='add'){
//这里写需要的逻辑
}else if(this.dialogStatus=='dele'){
}
}
那=和==的区别到底是什么?
1、含义不同
“=”是赋值的意思。它的作用是将一个表达式的值赋给一个左值。所谓左值是指一个能用于赋值运算左边的表达式。左值必须能够被修改,不能是常量。我们用变量作左值,还可以看到,指针和引用也可以作左值。
“==”是等一操作符,判断两边是否相等。利用相等运算符,如果希望相等运算符返回true,则运算符两侧的值或语句必须使相等的;如果不相等,则 = =运算符返回false。
2、返回值的结果不同:
“=”的结果实际上意味着把右边表达式的值赋给左边的运算数。赋值运算表达式的值也就是所赋的值。也就是说,“$a = 3”的值是 3。
“= = ” 则不同,它会返回false或true值。所以例如“4” = =4这样的语句将返回true,因为JavaScript会将字符“4”转换成数字4。如果希望该语句返回false,则需要使用恒等运算符(===)。
3、是否存在强制转换:
“=”该运算符将执行强制类型转换,所以也会有一些特殊的规则:
(1)如果一个操作数是数字,另一个是字符串,==运算符会尝试在比较之前将字符串转换成数字;
(2)如果一个操作数是布尔值,那么在比较之前它将会被运算符强制转换成为数值类型,在这种情况下,true被转换为1,而false被转换为0。
(3)如果一个操作数是null,而另一个是underfined,比较结果为true;
(4)如果一个或两个操作数都是NaN,比较结果为false。
“= =”不存在强制转换,而是赋值运算将原变量的值拷贝到新变量中(传值赋值),所以改变其中一个并不影响另一个。
代码及解析自己撰写
2 计算属性方法
- HTML
// 静态/动态的button按钮(和添加修改类似)
<el-button type="primary" @click="addPar(1)" size="mini">添加静态参数</el-button>
<el-button type="primary" @click="addPar(2)" size="mini">添加动态态参数</el-button>
<!-- 添加参数对话框 -->
<el-dialog :title="'添加'+ textTitle"
:visible.sync="dialogVisible" width="50%">
</el-dialog>
//textTitle是定义动态计算属性
- JS
// 1 首先在data当中定义空的title值
data() {
return {
titleTex:'',//定义空的title
dialogVisible: false,//弹框false
}
},
// 2 在方法里面让data定义的值与点击事件对应
methods: {
// 添加参数
addPar(e) {
this.dialogVisible = true;//点击显示弹框
this.titleTex = e//让定义空的title赋值对应的e
console.log(this.titleTex);
}},
// 3 最后在属性当中定义需要显示的文本
computed: {
// 动态计算标题文本
textTitle() {
if (this.titleTex === 1) {
return '动态参数'
} else {
return '静态参数'
}
}
}