Vue应用(三)---watch、computed、绑定类、绑定样式

xiaoxiao2021-03-01  19

<!-- watch侦听属性,computed计算属性,绑定class,绑定style --> <!DOCTYPE html> <html> <head> <title></title> <script type="text/javascript" src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> </head> <body> <!-- watch侦听属性,虽灵活,但容易出错 --> <div id="app"> <span >Message: {{ fullName }}</span> </div> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { firstName: 'Foo', lastName: 'Bar', fullName: 'Foo Bar' }, // 不推荐下面的写法,使用下面app2中的计算属性更合适 watch: { firstName: function (val) { this.fullName = val + ' ' + this.lastName }, lastName: function (val) { this.fullName = this.firstName + ' ' + val }, // 使用watch要注意不要循环依赖,否则容易造成无限循环,如下 // fullName:function(val){ // console.log("fullName") // var names = val.split(' ') // this.lastName = names[0] // this.firstName = names[names.length - 1] // } } }) </script> <!-- computed计算属性,默认只有get方法,当get方法中的属性变动后,自动渲染自身的值 --> <div id="app-2"> <span >Message: {{ fullName }}</span> </div> <script type="text/javascript"> var app2 = new Vue({ el: '#app-2', data: { firstName: 'Foo', lastName: 'Bar' }, computed: { fullName: function () { return this.firstName + ' ' + this.lastName } } }) </script> <!-- computed监听属性的set与get方法。注意在set方法中,不要再对自己的属性赋值,否则会循环调用set方法,内存溢出 --> <div id="app-3"> <span>{{firstName}}</span> <span>{{lastName}}</span> <span>{{fullName}}</span> </div> <script> var app3 = new Vue({ el: '#app-3', data: { firstName: 'Foo', lastName: 'Bar', // fullName: 'Foo Bar' }, computed: { fullName: { get: function () { console.log('get') return this.firstName + ' ' + this.lastName }, set: function (newValue) { var names = newValue.split(',') this.firstName = names[0] this.lastName = names[names.length - 1] console.log('set') // this.fullName = 'set a new value'; //这句话会导致无限循环 } } } }) </script> <!-- vue绑定标签的class属性 --> <div id="app-4"> <div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"></div> <div class="static" v-bind:class="classObject"></div><!-- 绑定的数据对象不必内联定义在模板里 --> <div v-bind:class="[activeClass, errorClass]"></div><!-- 这里数组的元素可以用三元表达式或者第一种对象格式替代 --> </div> <script type="text/javascript"> var app4 = new Vue({ el: '#app-4', data: { isActive: true, hasError: false, classObject: { active: true, 'text-danger': true //改变包含特殊字符-.等时,使用app3.classObject['text-danger']=false格式修改 // classObject可以通过下面的方式表达为计算属性 // return { // active: this.isActive && !this.error, // 'text-danger': this.error && this.error.type === 'fatal' // } }, activeClass: 'active', errorClass: 'text-danger' } }) </script> <!-- 当在一个自定义组件上使用 class 属性时,这些类将被添加到该组件的根元素上面 --> <div id="app-5"> <my-component></my-component> <my-component class="new"></my-component> </div> <script type="text/javascript"> Vue.component('my-component', { template: '<p class="foo bar">Hi</p>' }) var app5 = new Vue({ el: '#app-5' }) </script> <!-- 绑定内联样式,常常结合返回对象的计算属性使用 --> <!-- 样式的属性名包含中要使用单引号括起来。样式中,vue的属性不能包含中划线 --> <div id="app-6"> <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px',margin-left: marginLeft + 'px' }">css</div> <div v-bind:style="styleObject">css</div> </div> <script type="text/javascript"> var app6 = new Vue({ el: '#app-6', data: { activeColor: 'red', fontSize: 30, marginLeft:20, styleObject: { color: 'red', fontSize: '13px' } } }) </script> </body> </html>

转载请注明原文地址: https://www.6miu.com/read-3100255.html

最新回复(0)