Vue的语句与属性

Posted 2020-12-20 508335848vf

目录

• Vue语句与属性
  • 判断语句
  • 循环语句
  • 计算属性
  • 监听属性

Vue语句与属性

判断语句

常规的条件判断的指令：v-if v-else-if v-else指令后跟"表达式"

例如:`v-if="test==true"

<div id="vu">
    <p v-if="type === ‘1‘">chrome</p>
    <p v-else-if="type === ‘2‘">firebox</p>
    <p v-else>360</p>
</div> 
<script type="text/javascript">
    var vu=new Vue({
        el:‘#vu‘,
        data: {
            type:‘2‘
        }
    })
</script>

另外还有v-show指令,根据条件展示元素.

<div id="vu">
    <p v-show="type === ‘1‘">chrome</p>
    <p v-show="type === ‘2‘">firebox</p>

</div>
</body>
<script type="text/javascript">
    var vu=new Vue({
        el:‘#vu‘,
        data: {
            type:‘1‘
        }
    })
</script>

循环语句

循环使用v-for指令

配合 element in array 完成数组的遍历

<ul id="vu">
        <li v-for="n in sites">{{ n }}</li>
</ul>
<script type="text/javascript">
    var vu = new Vue({
        el: ‘#vu‘,
        data: {
            sites: [ ‘Runoob‘  , ‘Google‘ ,‘Taobao‘]
        }
    })
</script>

还可以遍历对象的属性

通过(value,key)方式遍历对象的属性,此外还可以附加index选项.

<div id="app">
    <ul>
        <li v-for="(value, key) in obj">
            {{ key }} : {{ value }}
        </li>
    </ul>
</div>
<script>
     new Vue({
        el: ‘#app‘,
        data:{
            obj: {
                author: ‘LuXun‘,
                name: ‘Nahan‘
            }
        }
    })
</script>

计算属性

计算属性关键词:computed

计算属性在处理一些复杂逻辑时很有用.

<!--实现翻转字符串功能-->
<div id="app">
    <p>{{message}}</p>
    <p>{{reverse_message}}</p>
</div>
<script>
    var vm=new Vue({
        el: ‘#app‘,
        data: {
            message:‘baidu‘
        },
        computed: {
            reverse_message:function(){
                return this.message.split(‘‘).reverse().join(‘‘);
                /*split()函数是将字符串拆分成字符串数组，
                reverse()函数将一个数组元素位置颠倒
                join(‘char’)函数是将一个数组以某个字符分隔组成字符串
                 */
            }
        }
    })
</script>

computed的getter和setter属性，直接引用使用getter属性，直接赋值使用setter属性，用法类似于C#的getter和setter

<div id="app">
    <p>{{message}}</p>
</div>
<script>
    var vm=new Vue({
        el: ‘#app‘,
        data: {
            name:‘百度‘,
            url:‘www.baidu.com‘
        },
        computed: {
            message:{
                get:function(){
                  return this.name+‘ ‘+this.url;
                },
                set:function(newValue){
                    this.name=newValue.split(‘ ‘)[0];
                    this.url=newValue.split(‘ ‘)[1];
                }
            }
        }
    }) 
</script>

<div id="app">
    <p>{{message}}</p>
</div>
<script>
    var vm=new Vue({
        el: ‘#app‘,
        data: {
            name:‘百度‘,
            url:‘www.baidu.com‘
        },
        computed: {
            message:{
                get:function(){
                  return this.name+‘ ‘+this.url;
                },
                set:function(newValue){
                    this.name=newValue.split(‘ ‘)[0];
                    this.url=newValue.split(‘ ‘)[1];
                }
            }
        }
    })
    vm.message="Google www.google.com";
    document.write(vm.message);
</script>

监听属性

Vue.js的监听属性watch，他能够监听数据的变化，并作出操作响应变化

<div id="app">
    <p>当前计数为:{{message}}</p>
    <button @click="message++">点击增加计数</button><!--点击将改变message的数值，引发watch函数-->
</div>
<script>
    var vm=new Vue({
        el: ‘#app‘,
        data: {
            message:0 /*赋初值*/
        },
    })
    vm.$watch(‘message‘,function(nowVal,preVal){/*第一个参数为监听的对象,function的第一个参数是现在的数值，第二个参数为之前的数值。*/
        alert(‘计数器值变化:‘+preVal+‘变到‘+nowVal);
    })
</script>