vue 的css及style的三种绑定方式

html-css017

vue 的css及style的三种绑定方式,第1张

1.数组方法,元素为css的名称,可以在里面使用三目运算

<div :class="[ isOne?'one':'', 'two']">数组方法 </div>

2.对象方法,元素键名为css名称,用true和false 来控制是否显示

<div :class="{'one':isOne,'two':true}">对象方法</div>

3.直接加入,加入的内容是css名称,可以通过计算来控制显示的css,名称

<div :class="isOne?'one':'two'" >直接加入</div>

1.数组方法,元素是一个个对象,对象则是style的键值对,当然可以用三目运算控制

<div :style="[{color: 'green',fontSize: '30px'} , isOne ?{'font-weight': 'bold'}:{}]" >数组方法</div>

2.对象方法,元素键名为style名称,值为style属性值。当然可以用三目运算控制来控制是否显示对应的style属性值

<div :style="{ color: isOne ?'green':'#f00' , backgroundColor:'#f00'}" >对象方法</div>

3.直接加入,只要保证得出来的字符串是正确的即可,怎么用都可以

<div :style="(isOne ? 'color:green' : '')+ 'backgroundColor:#f00' ">直接加入</div>

1、JS调用C#后台方法

方法一:

1、首先建立一个按钮,在后台将调用或处理的内容写入button_click中

2、在前台写一个js函数,内容为document.getElementById("btn1").click()

3、在前台或后台调用js函数,激发click事件,等于访问后台c#函数;

点击Click后,会引发页面回传事件,

方法二:

__doPostBack('源控件','参数')

<input id="Button1" type="button" name="Button1" value="按钮" onclick="javascript:__doPostBack('Button1','')">

执行顺序:引起页面回发后 页面的Init事件-->OnLoad-->处理回发事件(RaisePostBackEvent)-->render

2、C#调用前台JS方法 

this.Page.ClientScript.RegisterStartupScript(this.GetType(), "js", "ShowMaterialManager('" + url + "')", true)

 ShowMaterialManager为前台JS方法 

 执行顺序: 前台页面dom加载完毕-->执行调用的JS方法-->前台页面的Ready -->前台页面的OnLoad方法

  常用的生成客户端脚本方法:

  RegisterArraryDeclaration -- 添加javascript数组

RegisterClientScriptBlock-- 在 Web 窗体的开始处(紧接着 <form runat="server"> 标识之后)

RegiserStartScript-- ------- 在</form>前添加script代码块

RegisterStartupScript-- 在 Web 窗体的结尾处

RegisterClientScriptInclude--添加JS文件引用

RegisterClientScriptResource--添加外部资源文件引用

RegisterHiddenField--在<Form>后增加隐藏表单域