問題原因：

Vue2.0 不再支持在 v-html 中使用過濾器

解決方法：

1： 全局方法（推介）

2： computed 屬性

3： $options.filters（推介）

具體用法如下一頁：

2

1：使用全局方法

可以在 Vue 上定義全局方法：

Vue.prototype.msg= function (msg) {

return msg.replace("\n", "<br>")

};

然后所有地方上都可以直接用這個方法了:

<p v-html="msg(content)"></p>

3

2 : computed 屬性

var appMain= new Vue({

el: '#appMain',

computed :{

content： function (msg) { return msg.replace("\n", "<br>")

},

},

data: {

content: "XXXXX"

}

}）

頁面上：

<p>{{content}}</p>

4

3： $options.filters

在定義的vue里的filter添加方法：

var appMain= new Vue({

el: '#appMain',

filters:{

msg: function(msg) {

return msg.replace(/\n/g, "<br>") ;

}

},

data: {

content: "XXXXX"

}

})

然后頁面上都可以直接用這個方法了:

<p id="appMain">

<p v-html="$options.filters.msg(content)"></p>

</p>

vue在html中的使用

、實例與數(shù)據(jù)

Vue.js 應(yīng)用的創(chuàng)建很簡單，通過構(gòu)造函數(shù) Vue 就可以創(chuàng)建一個 Vue 的根實例，并啟動 Vue 應(yīng)用：

var app = new Vue ({
 //選項
})

變量 app 就代表了這個 Vue 實例。事實上，幾乎所有的代碼都是一個對象，寫入 Vue 實例的選項內(nèi)的。首先，必不可少的一個選項就是 el 。el 用于指定一個頁面已存在的 DOM 元素來掛載 Vue 實例，它可以是 HTMLElement ，也可以是 CSS 選擇器，比如：

<div id="app"></div>
var app = new Vue({
 el: document.getElementById('app') // 或者 el：'#app'
})

掛載成功后，可以通過 app.$el 來訪問該元素。Vue 提供了很多常用的實例屬性與方法，都以 $ 開頭，比如 $el 。

 <div id="app">
 <input type="text" v-model="name" placeholder="請輸入你的名字">
 <h1>Vue.js 最核心功能：數(shù)據(jù)的雙向綁定 —— {{ name }}</h1>
 </div>
 <script>
 var app = new Vue ({
 el: '#app',
 data: {
 name: ''
 }
 })
 </script>

上述代碼，在 input 標簽上，有一個 v-model 的指令，它的值對應(yīng)于創(chuàng)建的 Vue 實例的 data 選項中的 name 字段，這就是 Vue 的數(shù)據(jù)綁定。通過 Vue 實例的 data 選項，可以聲明應(yīng)用內(nèi)需要雙向綁定的數(shù)據(jù)。建議所有會用到的數(shù)據(jù)都預(yù)先在 data 內(nèi)聲明，這樣不至于將數(shù)據(jù)散落在業(yè)務(wù)邏輯中，難以維護。

Vue 實例本身也代理了 data 對象里的所有屬性，故可以這樣訪問：

 var app = new Vue({
 el: "#app",
 data: {
 a: 1
 }
 })
 sonsole.log(app.a); //1

除了顯式地聲明數(shù)據(jù)外，也可以指向一個已有的變量，并且它們之間默認建立了雙向綁定，當修改其中任意一個時，另一個也會一起變化：

 var myData = {
 a: 1
 }
 var app = new Vue({
 el: "#app",
 data: {
 a: myData
 }
 })
 sonsole.log(app.a); // 1
 // 修改屬性，原數(shù)據(jù)也會隨之修改
 app.a = 2;
 console.log(myData.a); // 2
 // 反之，修改原數(shù)據(jù)，Vue 屬性也會修改
 myData.a = 3;
 console.log(app.a); // 3

二、生命周期

每個 Vue 實例創(chuàng)建時，都會經(jīng)歷一系列的初始化過程，同時也會調(diào)用相應(yīng)的生命周期鉤子，我們可以利用這些鉤子，在合適的時機執(zhí)行我們的業(yè)務(wù)邏輯。如果你使用過 jQuery ,一定知道它的 ready() 方法，比如：

 $(document).ready(function() {
 // DOM 加載完后，會執(zhí)行這里的代碼
 });

Vue 的生命周期鉤子與之類似，比較常用的有：

• created : 實例創(chuàng)建完成后調(diào)用，此階段完成了數(shù)據(jù)的觀測等，但尚未掛載，$el 還不可用。需要初始化處理一些數(shù)據(jù)時會比較有用。
• mounted : el 掛載到實例上后調(diào)用，一般我們的第一個業(yè)務(wù)邏輯會在這里開始。
• beforeDestroy : 實例銷毀之前調(diào)用。主要解綁一些使用 addEventListener 監(jiān)聽的事件等。

這些鉤子與 el 和 data 類似，也是作為選項寫入 Vue 實例內(nèi)，并且鉤子的 this 指向的是調(diào)用它的 Vue 實例：

 var app - new Vue({
 el: '#app',
 data: {
 a: 2
 },
 created: function () {
 console.log(this.a); // 2
 }
 mounted: function () {
 console.log(this.$el); // <div id="app"></div>
 }
 })

三、插值與表達式

使用雙大括號（ Mustache 語法 ）“ {{ }} ” 是最基本的文本插值方法，它會自動將我們雙向綁定的數(shù)據(jù)實時顯示出來，例如實時顯示當前時間，每秒更新：

 <script>
 var app = new Vue ({
 el: '#app',
 data: {
 date: new Date()
 },
 mounted: function () {
 var _this = this; // 聲明一個變量指向 Vue 實例 this, 保證作用域一致
 this.timer = setInterval(function() {
 _this.date = new Date(); // 修改數(shù)據(jù) date
 }, 1000); // 1秒
 },
 beforeDestroy: function () {
 if (this.timer) {
 clearInterval(this.timer); // 在 Vue 實例銷毀前，清除我們的定時器
 }
 }
 })
 </script>

雙大括號里的內(nèi)容會被替換為 data 選項中 date 的值，通過任何方法修改數(shù)據(jù) data 選項中 date 的值，雙大括號的內(nèi)容都會被實時替換。這里的 {{ date }} 輸出的是瀏覽器默認的時間格式，并非格式化的時間（ 2018-10-07 10:05:59 ），所以需要注意時區(qū)。有多種方法可以對時間格式化，比如賦值前先使用自定義的函數(shù)處理。當然，Vue 的過濾器 （ filter ）或計算屬性 （ computed ）也可以實現(xiàn)。

如果有時候就是想輸出 HTML，而不是將數(shù)據(jù)解釋后的純文本，可以使用 v-html：

 <div id="app">
 <span v-html="link"></span>
 </div>
 <script>
 var app = new Vue({
 el: '#app',
 data: {
 link: '<a 
 }
 })
 </script>

link 的內(nèi)容將會被渲染為一個具有點擊功能的 a 標簽，而不是純文本。但是要注意，如果將用戶產(chǎn)生的內(nèi)容使用 v-html 輸出后，有可能導(dǎo)致 XSS 攻擊（跨站腳本攻擊），所以要在服務(wù)端對用戶提交的內(nèi)容進行處理，一般可將尖括號 “<>” 轉(zhuǎn)義。

如果想顯示 {{ }}標簽，而不進行替換，使用 v-pre 即可跳過這個元素和它的子元素的編譯過程，例如：

<span v-pre>{{ 這里會顯示雙花括號，內(nèi)容不會被編譯 }}</span>

在 {{ }} 中，除了簡單的綁定屬性值外，還可以使用 JavaScript 表達式進行簡單的運算、三元運算等，例如：

 <div id="app">
 {{ num / 100 }}
 {{ areYouOK ? '確定' : '取消' }}
 {{ text.split(',').reverse().join(',') }}
 </div>
 <script>
 var app = new Vue({
 el: '#app',
 data: {
 num: 100,
 areYouOK：false,
 text: '123,456'
 }
 })
 </script>

顯示結(jié)果依次為：1、取消、456,123 。

Vue.js 只支持單個表達式，不支持語句和流控制。另外，在表達式中，不能使用用戶自定義的全局變量，只能使用 Vue 白名單內(nèi)的全局變量，例如 Math 和 Date 。以下是一些無效的示例：

 <!-- 這是語句，不是表達式 -->
 {{ var text = '123,456' }}
 <!-- 不能使用流控制，要使用三目運算 -->
 {{ if (areYouOK) return msg }}

四、過濾器

Vue.js 支持在 {{ }} 插值的尾部添加一個管道符“ （ | ） ” 對數(shù)據(jù)進行過濾，經(jīng)常用于格式化文本，比如字母全部大寫、貨幣千位使用逗號分隔等。過濾的規(guī)則是自定義的，通過給 Vue 實例添加選項 filters 來設(shè)置，例如可以對時間進行格式化處理，實時顯示當前時間：

 <div id="app">
 {{ date | formatDate }}
 </div>
 <script>
 
 // 在月份、日期、小時等小于 10 時前面補 0
 var padDate = function(value) {
 return value < 10 ? '0' + value : value;
 };
 var app = new Vue({
 el: "#app",
 data: {
 date: new Date()
 },
 filters: {
 formatDate: function (value) { // 這里的 value 就是需要過濾的數(shù)據(jù)
 var date = new Date(value);
 var yaer = date.getFullYear();
 var month = padDate(date.getMonth() + 1);
 var day = padDate(date.getDate());
 var hours = padDate(date.getHours());
 var minutes = padDate(date.getMinutes());
 var seconds = padDate(date.getSeconds());
 // 整理返回格式化后的日期
 return yaer + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
 }
 },
 mounted: function () {
 var _this = this; // 聲明一個變量指向 Vue 實例 this , 保證作用域一致
 this.timer = setInterval({
 _this.date = new Date(); // 修改數(shù)據(jù) date
 }, 1000);
 },
 beforeDestroy: function() {
 if (this.timer) {
 clearInterval(this.timer); // 在 Vue 實例銷毀前，清除我們的定時器
 }
 }
 })
 </script>

過濾器也可以串聯(lián)，而且可以接收參數(shù)，例如：

 <!-- 串聯(lián) -->
 {{ message | filterA | filterB }}
 <!-- 接收參數(shù) -->
 {{ message | filterA('arg1', 'arg2') }}

過濾器應(yīng)當用于處理簡單的文本轉(zhuǎn)換，如果要實現(xiàn)更為復(fù)雜的數(shù)據(jù)變換，應(yīng)該使用計算屬性。