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

html-css024

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>后增加隐藏表单域