亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

搜索
博主信息
博文 35
粉絲 0
評論 0
訪問量 40054
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
vue.js基本操作——2018-10-7
THPHP
原創(chuàng)
1030人瀏覽過

1、 v-text,v-html變量渲染：

實例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue.js基本操作</title>
</head>
<body>
<div id="box">
    <p v-text="text"></p>
    <p v-html="html"></p>
</div>
<script src="../lib/js/Vue.js"></script>
<script>
/*  v-text,v-html變量渲染:v-text 不會解析html標(biāo)簽，v-html可以解析html標(biāo)簽 */
    new Vue({
        el:'#box',
        data:{
            text:'<h3>php中文網(wǎng)</h3>',
            html:'<h3>php中文網(wǎng)</h3>'
        }
    });
</script>
</body>
</html>

運行實例 ?

點擊 "運行實例" 按鈕查看在線實例


2、屬性綁定v-bind和事件綁定v-on

實例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue.js基本操作</title>
</head>
<body>
<div id="box">
    <h3 v-bind:style="style" v-on:click="Text">{{htmL}}</h3>
</div>
<script src="../lib/js/Vue.js"></script>
<script>
    new Vue({
        el:'#box',
        data:{
            htmL:'php中文網(wǎng)',
            style:'color:red;'
        },
        methods:{
            Text:function () {
                this.htmL = "ipnx.cn";
            }
        }
    });
</script>
</body>
</html>

運行實例 ?

點擊 "運行實例" 按鈕查看在線實例

3、雙向數(shù)據(jù)綁定：

實例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue.js基本操作</title>
</head>
<body>
<div id="box">
    <input type="text" v-model="info">
    <p>{{info}}</p>
</div>
<script src="../lib/js/Vue.js"></script>
<script>
    new Vue({
        el:'#box',
        data:{
            info:'css'
        }
    });
</script>
</body>
</html>

運行實例 ?

點擊 "運行實例" 按鈕查看在線實例

3、偵聽器：

實例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue.js基本操作</title>
</head>
<body>
<div id="box">
    <input type="text" v-model="user">
    <h3>{{length}}</h3>
    <span v-show="show" v-bind:style="style">{{text}}</span>
</div>
<script src="../lib/js/Vue.js"></script>
<script>
/*  v-text,v-html變量渲染:v-text 不會解析html標(biāo)簽，v-html可以解析html標(biāo)簽 */
    new Vue({
        el:'#box',
        data:{
            user:'',
            length:0,
            show:false,
            style:'color:red;',
            text:'用戶名太短'
        },
        watch:{
            user:function () {
                this.length++;
                if(this.length < 6){
                    this.show = true;
                }else {
                    this.show = false;
                }
            }
        }
    });
</script>
</body>
</html>

運行實例 ?

點擊 "運行實例" 按鈕查看在線實

批改狀態(tài)：合格

老師批語：
本博文版權(quán)歸博主所有，轉(zhuǎn)載請注明地址！如有侵權(quán)、違法，請聯(lián)系admin@php.cn舉報處理！
全部評論 文明上網(wǎng)理性發(fā)言，請遵守新聞評論服務(wù)協(xié)議
0條評論
關(guān)于我們 免責(zé)申明 意見反饋 講師合作 廣告合作 最新更新
php中文網(wǎng)：公益在線php培訓(xùn)，幫助PHP學(xué)習(xí)者快速成長！
關(guān)注服務(wù)號 技術(shù)交流群
PHP中文網(wǎng)訂閱號
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時隨地碎片化學(xué)習(xí)
PHP中文網(wǎng)抖音號
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號

    • 登錄PHP中文網(wǎng)，和優(yōu)秀的人一起學(xué)習(xí)！
    全站2000+教程免費學(xué)