vue模板语法上集

最新推荐文章于 2024-11-08 23:19:07 发布

呲花1

最新推荐文章于 2024-11-08 23:19:07 发布

阅读量217

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_62327548/article/details/126669698

版权

一、插值

文本： {{msg}}

html: 使用v-html指令用于输出html代码

属性：HTML属性中的值应使用v-bind指令

表达式:

Vue提供了完全的JavaScript表达式支持

{{str.substr(0,6).toUpperCase()}}

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

<li v-bind:id="'list-' + id">我的Id是js动态生成的</li>

class绑定

使用方式：v-bind:class="expression"

expression的类型：字符串、数组、对象

style绑定

v-bind:style="expression"

expression的类型：字符串、数组、对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
    <title>Title</title>
    <style>
        .a{
            color:yellow;
        }
    </style>


</head>
<body>
    <div id="app">
        <p>文本</p>
        {{msg}}
        <p>html页面转义</p>
        <div v-html="htmlstr"></div>
        <p> v-bind 属性绑定</p>
        <input value="值">
        <input v-bind:value="valuestr" />
        <input :value="valuestr" />
        <p>vue中可以对变量进行二次处理</p>
        {{str.substring(0,4)}}<br>
        {{num + 4}}<br>
        {{ok ? '1' : '0'}}<br>
        <span :id="idstr+'1'">书籍信息</span>
        <p>calss绑定</p>
        <span :class="classStr">文本类容</span>
        <p>calss绑定</p>
        <span :class="styleStr">文本类容</span>



    </div>
</body>
<script type="text/javascript">
    new Vue({
            el:'#app',
            data(){
                return{
                    msg:'hello vue!!!',
                    htmlstr:'<span style="color: red;">文本内容</span>',
                    valuestr:'vue值',
                    str:'hello world',
                    num:6,
                    ok:false,
                    idstr:'book_',
                    classStr:'a',
                    styleStr:'color:blue;'
                }
            }
    })

</script>
</html>

测试：

二、指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
    <title>Title</title>

</head>
<body>
    <div id="app">
        <p>v-if</p>
        <!--输入分数，60分一下不及格、60-70分为合格、80-90为优秀、90分以上为优+ -->
        请输入分数：<input v-model="score"/>
        对应的结果：
        <span v-if="score<60">不及格</span>
        <span v-else-if="score<70">合格</span>
        <span v-else-if="score<80">良</span>
        <span v-else-if="score<90">优秀</span>
        <span v-else-if="score<=100">优+</span>
        <span v-else="">输入不合法</span>
        <p>v-show</p>
        请输入结果:<input v-model="showflag" />
        <span v-show="showflag">show:展示与否</span>
        <span v-if="showflag">if:展示与否</span>
        <p>v-for</p>
        <select >
            <option v-for="l in likes" :value="l.id" name>{{l.name}}</option>
        </select>
        <br>
        <div v-for="l in likes">
            <input  type="checkbox" :value="l.id" name>{{l.name}}
        </div>


    </div>
</body>
<script type="text/javascript">
    new Vue({
            el:'#app',
            data(){
                return{
                    score:0,
                    showflag:false,
                    likes:[
                        {id:1,name:'网吧'},
                        {id:1,name:'酒吧'},
                        {id:1,name:'清吧'},
                        {id:1,name:'茶吧'}
                    ]
                }
            }
    })

</script>
</html>

测试：

三、过滤器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
    <title>Title</title>

</head>
<body>
    <div id="app">
        <!--{{msg | zxw}}-->
        <!--过滤器的串联-->
        {{msg | zxw | zxw2}}
        <!--过滤器传参-->
        {{msg | zxw3(2,5)}}
        {{msg | zxw3(1,4)}}

    </div>
</body>
<script type="text/javascript">
    Vue.filter('zxw',function(value){
        console.log(value);
        return value.substring(0,5);
    })
    Vue.filter('zxw2',function(value){
        debugger;
        console.log(value);
        return value.substring(3,5);
    })
    Vue.filter('zxw3',function(value,a,b){
        debugger;
        console.log(value);
        return value.substring(a,b);
    })
    new Vue({
            el:'#app',
            data(){
                return{
                    msg:'hello vue!!!'
                }
            }
    })

</script>
</html>

测试：

四、计算属性&监听属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
    <title>Title</title>

</head>
<body>
    <div id="app">
        <p>计算属性</p>
        请输入第一个数:<input v-model="x" /><br>
        请输入第二个数:<input v-model="y" /><br>
        结果为:{{addFlag}}
        <p>监听属性</p>
        请输入千米:<input v-model="km" /><br>
        请输入米:<input v-model="m" /><br>


    </div>
</body>
<script type="text/javascript">
    new Vue({
            el:'#app',
            data(){
                return{
                    x:0,
                    y:0,
                    km:0,
                    m:0
                }
            },computed:{
                // 计算属性
                addFlag:function () {
                    return parseInt(this.x)   + parseInt(this.y)
                }
             },
        watch:{
                //当前对应的是被监听的属性、v指的是被监听属性的值
                //当v对应的值发生变化的时候、会执行这个方法
                //v代表的是千米
                km:function(v){
                    this.m = parseInt(v)*1000;
                },

                m:function(v) {
                    this.km = parseInt(v)/1000;
                }
            }
    })

</script>
</html>

测试：