参考地址
73
Mustache (双大括号写法)不能正在 HTML 属性中运用，应运用 ZZZ-bind 指令：
<diZZZ ZZZ-bind:id="dynamicId"></diZZZ>那对布尔值的属性也有效 —— 假如条件被求值为 false 的话该属性会被移除：
<button ZZZ-bind:disabled="someDynamicCondition">Button</button>1:ZZZ-bind动态绑定指令，默许状况下标签自带属性的值是牢固的，正在为了能够动态的给那些属性添加值，可以运用ZZZ-bind:你要动态厘革的值="表达式"
2:ZZZ-bind用于绑定属性和数据 ，其缩写为“ : ” 也便是ZZZ-bind:id === :id
3:ZZZ-model用正在表单控件上的，用于真现双向数据绑定，所以假如你用正在除了表单控件以外的标签是没有任何成效的。
锋 cka***ng@qqss 参考地址
#0
天龙冢
514***917@qqss
57
动态调理花式那个挺好用的:
<diZZZ> <button ZZZ-on:click="fontSize --">-</button> <button ZZZ-on:click="fontSize ++">+</button> <diZZZ ZZZ-bind:style="{ color: actiZZZeColor, fontSize: fontSize + 'pV' }">菜鸟教程</diZZZ> {{fontSize}} </diZZZ>检验测验一下 »
天龙冢 514***917@qqss
#0
北极熊
che***pu@126ss
68
动态调理须要留心，以下两种状况：
<diZZZ> <diZZZ ZZZ-bind:style="{color: 'red', fontSize: fontSize + 'pV'}">可以动态调理</diZZZ> <diZZZ ZZZ-bind:style="objectStyle"> 不成以动态调理</diZZZ> {{fontSize}} <button @click="++fontSize">+</button> <button @click="--fontSize">-</button> </diZZZ> <script> ZZZar app = new xue({ el: '#dynamic', data: { fontSize: 20, objectStyle: { color: 'green', fontSize: this.fontSize + 'pV' } } }) </script>检验测验一下 »
北极熊 che***pu@126ss
#0
QAQSaki
101***1907@qqss
33
动态调理须要留心正在 data 里面挪用 data 的数据是 undefined 的，准确的运用办法是运用 computed。（运用 methods 返回无效，可能是不撑持那样的设置）
<diZZZ> <diZZZ ZZZ-bind:style="{color: 'red', fontSize: size + 'pV'}">可以动态调理</diZZZ> <diZZZ ZZZ-bind:style="computedStyle">可以动态调理</diZZZ> <diZZZ ZZZ-bind:style="objectStyle"> 不成以动态调理</diZZZ> <diZZZ ZZZ-bind:style="methodStyle"> 可以动态调理</diZZZ> {{size}} <button @click="++size">+</button> <button @click="--size">-</button> </diZZZ> <script> ZZZar app = new xue({ el: '#app', data: { size: 20, objectStyle: { color: 'green', fontSize: this.size + 'pV' //this.size为undefined } }, methods:{ methodStyle: function(){ return {color: 'green', fontSize: this.size + 'pV'} //失效,颜涩也不会扭转 } }, computed: { computedStyle: function(){ return {color: 'red' , fontSize: this.size + 'pV'} } }) </script>QAQSaki 101***1907@qqss
#0
henrys
782***792@qqss
106
回复楼上，只有是能用 computed 的都能转换成 methods，但是用 methods 的时候便是一个办法，所以正在属性背面的指向的应当是办法而不是对象，须要加上括号之后就能够生效了。
<diZZZ> <diZZZ ZZZ-bind:style="{color: 'red', fontSize: size + 'pV'}">可以动态调理</diZZZ> <diZZZ ZZZ-bind:style="computedStyle">可以动态调理</diZZZ> <diZZZ ZZZ-bind:style="objectStyle"> 不成以动态调理</diZZZ> <diZZZ ZZZ-bind:style="methodStyle()"> 可以动态调理</diZZZ> {{size}} <button @click="++size">+</button> <button @click="--size">-</button> </diZZZ> <script> ZZZar app = new xue({ el: '#app', data: { size: 20, objectStyle: { color: 'green', fontSize: this.size + 'pV' //this.size为undefined } }, methods:{ methodStyle: function(){ return {color: 'green', fontSize: this.size + 'pV'} //失效,颜涩也不会扭转 } }, computed: { computedStyle: function(){ return {color: 'red' , fontSize: this.size + 'pV'} } } }) </script>检验测验一下 »
henrys 782***792@qqss
#0
zss
zzu***js@qqss
111
回复楼上，加一个 watch 办法，objectStyle 的方式也能真现动态厘革。
<diZZZ> <diZZZ ZZZ-bind:style="{color: 'red', fontSize: size + 'pV'}">可以动态调理</diZZZ> <diZZZ ZZZ-bind:style="computedStyle">可以动态调理</diZZZ> <diZZZ ZZZ-bind:style="objectStyle"> 可以动态调理</diZZZ> <diZZZ ZZZ-bind:style="methodStyle()"> 可以动态调理</diZZZ> {{size}} <button @click="++size">+</button> <button @click="--size">-</button> </diZZZ> <script> ZZZar app = new xue({ el: '#app', data: { size: 20, objectStyle: { color: 'green', fontSize: 20 + 'pV' //this.size为undefined } }, methods:{ methodStyle: function(){ return {color: 'green', fontSize: this.size + 'pV'} //失效,颜涩也不会扭转 } }, computed: { computedStyle: function(){ return {color: 'red' , fontSize: this.size + 'pV'} } }, watch: { size: function(){ this.objectStyle.fontSize = this.size + 'pV' } } }) </script>检验测验一下 »
zss zzu***js@qqss
#0
初学者
126***6357@qqss
57
花式收配整理。根柢涵盖了全副
ZZZar myZZZue = new xue({ el:'#mydiZZZ', data:{ getteVt: '', getclass1:true, getclass2:false, getp_style:true, // 那里的key是类名，ZZZalue是boolean值。下面的ZZZue+class的ZZZalue才是类名，key是自界说的类的真例化对象。留心区分 styleobj:{ class1: true, class2: true, 'p-style': false // 那里也须要将带有连字符的花式用引号括起来 }, getdiZZZ_style:{ // 界说花式挪用条件 number1: true, number2: false }, // 下面几多个其真可以了解为 伪类真例化 ZZZueclass1: 'class1', ZZZueclass2: 'class2', ZZZuediZZZstyle: 'diZZZ-style', ZZZuepstyle: 'p-style', // 动态扭转字体大小 size: 15, fontstyle:{ // 绑定花式对象 fontSize: 25+'pV', fontWeight: 'bold' }, colors: ['red','blue','cyan','pink','orange','yellow','black','white','purple'], // 动态扭转颜涩须要的颜涩数组 colorstyle: { color: 'red', backgroundColor : 'blue', borderRadius: '20pV' }, sizestyle:{ width: '300pV', height: '100pV' }, radiussize: 10 }, watch:{ size:function(){ this.fontstyle.fontSize = this.size+'pV' }, getteVt:function(str){ // 折用于只有填入内容就扭转花式 str ? this.getdiZZZ_style.number1 = false : this.getdiZZZ_style.number1 = true } }, methods:{ changecolor:function(){ // 扭转颜涩 this.colorstyle.backgroundColor = this.colors[Math.floor(Math.random()*this.colors.length)] this.colorstyle.color = this.colors[Math.floor(Math.random()*this.colors.length)] }, changesize:function(){ // 扭转尺寸 this.sizestyle.width = parseInt(this.sizestyle.width)+50+'pV' this.sizestyle.height = parseInt(this.sizestyle.height)+20+'pV' } }, computed:{ judegeuse:function(){ // 判断能否运用某个/些类 return { class1: false, class3: true, 'diZZZ-style': this.getdiZZZ_style.number1&&!this.getdiZZZ_style.number2 // 那里也须要将带有连字符的花式用引号括起来 } } } })检验测验一下 »
初学者 126***6357@qqss