20181031 Vue样式绑定

最新推荐文章于 2022-08-31 18:47:39 发布

宫城诗

最新推荐文章于 2022-08-31 18:47:39 发布

阅读量151

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/qq_36344771/article/details/83592420

版权

Vue 专栏收录该内容

46 篇文章 0 订阅

订阅专栏

vue中的样式绑定
给要进行的操作的标签进行绑定，:class=“activate:isActivated”
class的样式是activate 取决于isActivated
现在data的对象中加入 isActivated这个属性为false
注册鼠标点击事件，当点击的时候变成true 这样class就变成了activate
改变了样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
    <style>
        .activated{
            background-color: red;
        }
    </style>
</head>
<body>
<div id="app" @click="handleDiv" :class="{activated:isActivated}">
    hello world
</div>
<script>
    var vm =new Vue({
        el:"#app",
        data:{
            isActivated:false
        },
        methods:{
            handleDiv:function () {
                this.isActivated=true;
            }
        }
    })
</script>

</body>
</html>

v-if 与v-show的区别
当v-if的值为false的时候，该标签是不存在的
如果v-show的值为false的时候，标签里的display的属性为none

还有v-else的使用方法，记得要跟v-if进行联用，不能在其中多加一些标签
还有v-else-if 与最后的v-else

当改变想要展现的数组的时候，不能通过下标直接改变数据
pop push shift unshift splice sort reverse
需要通过以上的方法进行改变才可以

第二个方法改变数据的引用也可以

item是值 key是属性名 index指的是在对象的第几个位置

最后还可以利用 Vue.set方法对数据进行更改

建立了一个模板，如果模板在table标签中tbody中的tr就无法再table标签显示出 template
所以用一个树形is =“template name”

在标签里可以有引用 ref=“‘” 方便与，vue实例对该标签里的内容进行操作。获取内容

小型计数器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="root">
    <counter ref="one" @change="handlevmClick"></counter>
    <counter ref="two" @change="handlevmClick"></counter>
    <div>{{total}}</div>
</div>
<script src="vue.js"></script>
<script>
    Vue.component("counter",{
        template:'<div @click="handleClick">{{number}}</div>',
        data:function () {
            return {
                number:0
            };
        },
        methods:{
            handleClick: function () {
                this.number++;
                this.$emit('change')
            }
        }
    });
    var vm =new Vue({
        el:"#root",
        data:{
            total:0
        },
        methods:{
            handlevmClick:function () {
                this.total=this.$refs.one.number+this.$refs.two.number
            }
        }

    })
</script>
</body>
</html>

子组件与父组件传递
props:
子组件可以使用父组件传递过来的参数
但是子组件不能改变父组件传递过来的参数
子组件的data一定是个函数
number :this.count
相当于声明一个新的变量等于父组件传递过来的值
然后对这个声明的新变量就行改变
单项数据流

宫城诗

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
20181031 Vue样式绑定

vue中的样式绑定给要进行的操作的标签进行绑定，:class=“activate:isActivated”class的样式是activate 取决于isActivated现在data的对象中加入 isActivated这个属性为false注册鼠标点击事件，当点击的时候变成true 这样class就变成了activate改变了样式&lt;!DOCTYPE html&gt;&lt;htm...
复制链接

扫一扫

专栏目录